全局事件总线:一种组件间通信的方式,适用于任意组件间通信。
main.js:
安装全局事件总线:借助钩子beforeCreate(){Vue.prototype.$bus = this}
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
//安装全局事件总线,$bus就是当前应用的vm
Vue.prototype.$bus = this
},
})
接收数据的组件:
A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
mounted() {
//监听事件
this.$bus.$on('checkTodo',this.checkTodo)
this.$bus.$on('deleteTodo',this.deleteTodo)
},
beforeDestroy() {
//解绑事件
this.$bus.$off('checkTodo')
this.$bus.$off('deleteTodo')
},
提