意义:实现任意组件间的通信
保证:1.所有组件都能找到x
2.x可以调用到$on,$off,$emit
安装全局事件总线
main.js
里创建Vue实例时,在beforeCreate()
钩子中配置$bus
,$bus
就是当前应用的vm
new Vue({
el:'#app',
render:h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
}
})
使用事件总线
接收数据的组件中给this.$bus
绑定事件,提供数据的组件中调用this.$bus.$emit
//接收数据组件,回调可以配置到methods中,使用this.事件名调用
this.$bus.$on('事件名',()=>{})
//提供数据组件
this.$bus.$emit('事件名',参数)
注意:在组件销毁之前将当前组件上给$bus
绑定的事件解绑
beforeDestroy(){
this.$bus.$off('事件名') //注意一定要写事件名
}