Vue 全局事件总线

任意组件间通信。

概念

• Vue 原型对象上包含事件处理的方法

1. $on(eventName, listener): 绑定自定义事件监听

2. $emit(eventName, data): 分发自定义事件

3. $off(eventName): 解绑自定义事件监听

4. $once(eventName, listener): 绑定事件监听, 但只能处理一次

• 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象

  1. 所有组件对象都能看到 Vue 原型对象上的属性和方法

  2. Vue.prototype.$bus=newVue(),所有的组件对象都能看到$bus 这个属性对象

• 全局事件总线

  1. 包含事件处理相关方法的对象(只有一个)
  2. 所有的组件都可以得到

配置

• main.js

new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

例子

Student组件向Shool组件共享数据

• School.vue

mounted() {
    this.$bus.$on('hello',(data)=>{
        console.log('我是School组件，收到了数据',data)
    })
},

• Student.vue

sendStudentName(){
    this.$bus.$emit('hello',this.name)
}