vue 任意组件间的通信方式

1. 全局事件总线：

// main.js 
// 1.安装全局事件总线，$bus就是当前   应用的vm
new Vue({
 render: h => h(App),
 beforeCreate(){
   Vue.prototype.$bus=this  
 }
}).$mount('#app')

// 2.使用事件总线：
// 组件一：
 methods:{
    handleLink(){
      this.$bus.$emit('hello',666)
    }
  }
// 组件二：
  mounted() {
    this.$bus.$on("hello", (data) => {
      console.log("我接受到school组件的传值" + data);
    });
  },
  // 3.解绑当前组件所用到的事件
  beforeDestroy() {
    this.$bus.$off("hello");  
  },

2. 消息订阅与发布（pubsub-js ）

// 1.安装
npm i pubsub-js  
// 2. 引入
import pubsub from 'pubsub-js' 
//消息订阅
this.pubId=pubsub.subcribe('事件名',(a,b)=>{
console.log(b)
})  
//消息发布
pubsub.publish('事件名',传递参数)  
// 销毁事件
beforeDestroy() {
  this.$bus.$off("hello");
  pubsub.unsubscribe(this.pubId)
},