任意组件间通信。
概念
- Vue 原型对象上包含事件处理的方法
-
$on(eventName, listener): 绑定自定义事件监听
-
$emit(eventName, data): 分发自定义事件
-
$off(eventName): 解绑自定义事件监听
-
$once(eventName, listener): 绑定事件监听, 但只能处理一次
-
所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
-
所有组件对象都能看到 Vue 原型对象上的属性和方法
-
Vue.prototype. b u s = n e w V u e ( ) , 所有的组件对象都能看到 bus = new Vue(), 所有的组件对象都能看到 bus=newVue(),所有的组件对象都能看到bus 这个属性对象
-
-
全局事件总线
- 包含事件处理相关方法的对象(只有一个)
- 所有的组件都可以得到
配置
- 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)
}