Vue2中使用全局事件总线

个人理解

通过一个参数去实现任意组件间通信的一个方法

这个参数需要被所有VueComponents看见

仅仅可以在Vue2中使用, 因 Vue3中已经废弃了prototype

第一步：实现全局事件总线

---

在main.js中

// 创建vm的实例对象
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus=this //安装全局总线
  },
}).$mount('#app')

通过绑定到vm实例对象身上,实现任意组件都可以看见这个$bus

---

这里我定义两个组件,为兄弟关系进行演示

在brother.vue 组件中

mounted() {
		this.$bus.$on('hello',data=>{
			console.log('收到了数据',data);
		})
	},

通过生命周期函数绑定函数,  

通俗理解,那个组件需要数据,在那个组件中写回调,

在组件中的this指的是vc(VueComponents)实例对象,在它身上可以看见$bus, 通过$on绑定回调

回调中有两个参数   第一个参数: 定义回调名称,第二个参数:为收到的数据

---

在brother2.vue 组件中

methods: {
		StudentName(){
			this.$bus.$emit('hello',666)
		}
	},

 可以通过事件回调来获取参数,也可以绑定在mounted钩子中

通过this.$bus.$emit  来获取回调函数, 两个参数, 第一个参数:回调的名称,跟定义回调时传入的名称必须相同, 第二个参数为需要的数据.

---

再次回到  borther.vue中 

mounted() {
		this.$bus.$on('hello',data=>{
			console.log('收到了数据',data);
            //输出结果为: 收到了数据:666
		})
	},

data即为收到的数据,可实现组件间通信

---

解绑全局事件总线 

最好在beforedestory钩子中解绑

// 解绑brother.vue组件实例身上的事件 （解绑单个事件）

	// this.$off('hello')
	    // 解绑多个(且确定的事件)

			// this.$off(['hello', 'demo'])

			    // 全部解绑

			        this.$off()

---

组件间通信其他方式

父传子  props

子传父  组件自定义事件

兄弟  全局事件总线, Vuex , 消息订阅与发布