全局事件总线(GlobalEventBus)
-
一种支持所有组件间的通信方式(原理:相当于提供一个全局对象,这个对象能够被任意组件访问到,并且这个对象能够调用Vue内置函数)
-
安装全局事件总线
new Vue({ el:'#app', render: h=>h(App), beforeCreate() { //将Vue实例对象放在Vue原型对象上的X属性中,即,安装全局事件总线 Vue.prototype.$bus = this; } })
-
使用事件总线
3.1 数据接收方:需要绑定自定义事件,在组件即将销毁的时候,解除对应的事件绑定export default { //组件名 name: "XXX", data(){ return { ... } }, methods:{ //这里用于接收数据的方法自己随意命名 dataReceive(data){ console.log(data) } } mounted() { //在总线上绑定事件 this.$bus.$on('yourEventName',this.dataReceive); /* 写法2:$on方法的第二个参数一定要写成箭头函数的形式 this.$bus.$on('yourEventName',(data)=>{ ... }); */ }, beforeDestroy() { //在组件即将销毁的时候,解除对应的事件绑定 this.$bus.$off('yourEventName'); }
3.2 数据发送方: 需要在触发数据发送的方法中提供如下代码:
this.$bus.$emit('yourEventName',data)
-
最好在 beforeDestory( )钩子中使用$off方法解除自定义事件的绑定