Vue2基础篇-29-全局事件总线（GlobalEventBus)
迪丽瓦拉
2024-03-28 07:17:30
0次
1. 简介
-
一种组件间通信的方式，适用于任意组件间通信。
-
安装全局事件总线：
new Vue({......beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},...... }) -
使用事件总线：
-
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){demo(data){......} } ...... mounted() {this.$bus.$on('xxxx',this.demo) } -
提供数据：
this.$bus.$emit('xxxx',数据)
-
-
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
2. demo
2.1 安装全局事件总线
// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";// 关闭Vue的生产提示
Vue.config.productionTip = false;// 创建Vm
new Vue({el: "#app",render: (h) => h(App),beforeCreate() {//安装全局事件总线Vue.prototype.$bus = this;},
});
2.2 学生组件 绑定事件
学生名称为{{ StudentName }}
学生地址为{{ StudentAddress }}
2.3 学校组件 发送数据
学校名称为{{ SchoolName }}
学校地址为{{ SchoolAddress }}
下一篇：Java 类规范与声明