全局事件总线(GlobalEventBus)
- 一种组件间通信的方式,适用于任意组件间通信。
安装全局事件总线
在main.js
里
new Vue({
...
beforeCreate() {
Vue.prototype.$bus = this
},
...
})
使用全局事件总线
- 接收数据:A组件想要接收数据,则在A组件中给
$bus
绑定自定义事件,事件的回调在A组件自身。
methods:{
demo(data){...}
},
...
mounted() {
this.$bus.$on('事件名',this.demo)
}
- 提供数据
methods: {
sendXxx() {
this.$bus.$emit('事件名', 数据)
}
}
销毁全局事件总线
最好在beforeDestory钩子中,解绑当前组件所用到的事件。
beforeDestroy() {
this.$bus.$off('事件名')
}
使用场景
当父子间通信时用props
最方便,子给父传用props
传递一个函数或者使用自定义事件
都可以。
但当父孙之间通信时,需要通过子组件这个媒介,子组件本身是不用这些方法的,所以此时用全局事件总线比较合适。