vue中的组件通信（子向父和任意组件之间）（组件的自定义事件、全局事件总线、消息订阅与发布）

组件的自定义事件(子 => 父)

1. 一种组件中通信的方式，适用于：子组件 => 父组件
2. 适用场景：A是父组件，B是子组件，B给A传数据，就要在A中给B绑定自定义事件(事件的回调在A中)
3. 绑定自定义事件：
   在父组件中：(xxx为自定义事件名)(demo为子组件名)
   方法一：<demo @xxx="test">
   方法二：

     <demo ref="demo"><demo>
       ... 
     mounted(){
       this.$refs.xxx.$on('xxx',this.test)
     }
     ```
   

4. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
5. 触发自定义事件：this.$emit('xxx',数据)（写在子组件中）
6. 解绑自定义事件：this.$off('xxx')（写在父组件中）
7. ⚠️：通过this.$refs.xxx.$on('xxx',回调函数)绑定自定义事件时，回调函数要么配置在methods中，要么用箭头函数。否则this指向会出问题

---

全局事件总线(任意之间)

1. 适用于任意组件之间的通信
2. 安装全局事件总线：

new Vue({
  ....
  beforeCreate() {
    // 安装全局事件总线，$bus就是当前应用的app
    Vue.prototype.$bus = this;
  }
})

3. 使用事件总线：
   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

   methods: {
     demo(data) { ... }
   }
   ...
   mounted() {
     this.$bus.$on('xxx',this.demo)
   }
   

   2. 提供数据：this.$bus.$emit('xxx',数据)
4. 最好在beforeDestroy钩子中，用$off去解绑当前组件用到的事件(谁$on了谁$off)

---

消息订阅与发布(任意之间)

同样适用于任意组件之间的通信
使用步骤：

1. 安装pubsub：npm install pubsub-js
2. 引入：import pubsub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods:{
  demo(data){

  }
}
... 
mounted(){
  this.pid = pubsub.subscribe('xxx',this.demo)  // 订阅消息
}

4. 提供数据：pubsub.publish('xxx',数据)
5. 最好在beforeDestroy钩子中，用pubsub.unsubscibe(pid)去取消订阅

---