Vue全局事件总线(任意组件之间通信)

vue组件中如果要通信，一般是通过父组件监听，然后再操作，这样比较繁琐，可以利用全局事件总线来实现。

A组件要触发B组件的事件：

先要绑定全局事件总线的变量

main:

new Vue({
  router,
  store,
  render: h => h(App),

  beforeCreate(){
    Vue.prototype.$bus = this //安装全局事件总线 此时的this指向Vue 可以使用vue里面的方法 如$on $emit
  }

}).$mount('#app')

//A组件：
<button @click="allchang">全局组件事件</button>

methods:{
        allchang(){
            this.$bus.$emit('hello',this.name) //触发原型上面的hello事件
        }

    },

//因为只有一个原型  如果命名重复的话 会造成不良的后果 所以一定要避免 开发中一定要写明



//B组件
    methods:{
        allhellos(name){
            console.log('我是全局事件',name);
        },
    },
    mounted(){
        this.$bus.$on('hello',this.allhellos)
    },

//因为只有一个原型  如果命名重复的话 会造成不良的后果 所以一定要避免 开发中一定要写明
//可以通过beforeDestroy函数进行销毁 但是也要注意命名冲突的问题 
    beforeDestroy(){
        this.$bus.$off('hello') //记得写上销毁事件的名称 不然会全部销毁
    }

也可以通过pubsub-js插件来实现消息的发布与订阅

安装pubsub插件 组件内引入 发布订阅都要导入
import pubsub from 'pubsub-js'

//发布消息组件
methods:{
    //插件库发布消息
        pubsubchang(){
            pubsub.publish('hello',this.name)
        }
}


//订阅消息组件
methods:{
    hellopubsub(msg,data){ //第一个参数为事件名称 第一个是数据
            console.log('我是全局事件',msg,data);
    },
},
mounted(){
        //插件库订阅消息
        this.pubId = pubsub.subscribe('hello',this.hellopubsub)
},

//注销
beforeDestroy(){
     pubsub.unsubscribe(this.pubId)
}