Vue cli 全局事件总线

一、优点

任意组件间通讯

二、安装全局事件总线

mian.js，使用生命周期钩子beforeCreate

new Vue({
    el:'#app',
    render: h => h(App),
    // 生命周期钩子
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

三、使用全局事件组件

B组件传递数据给A组件

1、接受数据(A组件)

回调方法

methods:{
    checkChekbox(thingID){
        ....
        });
    },
}

生命周期钩子

//开启
mounted() {
    this.$bus.$on('checkChekbox', this.checkChekbox)
},
// 关闭
beforeDestroy() {
    this.$bus.$off('checkChekbox')
},

2、提供数据(B组件)

methods: {
    //点选 clickTing 触发事件
    clickThing(thingId){
        this.$bus.$emit('checkChekbox', thingId)
    },
},