[JavaScript知识库]Vue_全局事件总线、消息订阅发布！

Vue_全局事件总线、消息订阅与发布

因为我们知道使用Vue框架开发，避免不了组件化开发，那么每个组件间肯定会通信，就是需要组件间传递数据，那么Vue中 全局事件总线、消息订阅与发布都可以实现任意组件间通信。

其次，自定义事件以及props配置项也是可以通信，但只限于子组件向父组件间通信，或者说可以让组件接收到外部传来的数据。

1、Vue全局事件总线（GlobalEventBus）

? 开发中较常用的一种组件间通信的方式，适用于任意组件间通信。它的本质就是“自定义事件”

（1）绑定全局事件总线
需要在mian.js的构造Vm对象实例中，利用 beforeCreate钩子去挂载全局配置。

new Vue({
  render: h => h(App),
  //绑定全局事件总线
  beforeCreate() {
    Vue.prototype.$bus = this
  },
}).$mount('#app')

（2）使用事件总线

使用事件总线时，假如 A组件向B组件通信，那么就是A是提供数据的，B是接受数据的。
则在A中给$bus绑定自定义事件，事件的回调留在A组件自身。

提供数据：

  this.$bus.$emit("事件名", 数据);

接收数据：

  methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('事件名',this.demo)
}

组件事件销毁解绑
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

this.$bus.$off("事件名");

2、消息订阅与发布 （pubsub）

? 也是一种组件间通信的方式，适用于任意组件间通信。

消息订阅与发布的分析：
需要数据的地方订阅消息
提供数据的地方发布消息

使用步骤：
原生Js里没有办法实现消息订阅与发布，那么就得需要借助第三方库，当然第三方库太多了。
下面就使用 pubsub-js 库去实现

1. 安装pubsub：npm i pubsub-js

2. 引入: import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

订阅消息

methods(_,data){
  demo(data){......}
}
......
mounted() {
  this.pubId = pubsub.subscribe('消息名',this.demo) //订阅消息
}

发布消息

pubsub.publish('消息名',数据)```

组件事件销毁解绑

在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去 取消订阅。

PubSub.unsubscribe(pubId)

3、 自定义事件

1. 一种组件间通信的方式，适用于：子组件 向 父组件 通信

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（ 事件的回调在A中 ）。

3. 绑定自定义事件：

第一种方式，在父组件中：<Demo :test="test"/>或 <Demo @test="test"/>

第二种方式，在父组件中,给想要绑定事件的元素上打个"ref", 在mounted钩子中配置this.$refs.xxx.$on('test',this.test)

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

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  this.$refs.xxx.$once('事件名',this.test)

触发自定义事件：this.$emit('事件名',数据)

解绑自定义事件this.$off('事件名')

组件上也可以绑定原生DOM事件，需要使用native修饰符。

注意：通过this.$refs.xxx.$on('事件名',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

4、配置props

props配置也可以接收外部传过来的数据，props以数组形式接受数据。

传递数据：

<hello name="张三" age=“18”/>

接收数据：

1. 第一种方式（接收的字符串）：props:['']

     props: ["name","age"],  
   

2. 第二种方式（限制类型）：props:{name:String}

3. 第三种方式（限制类型、限制必要性、指定默认值）：

     props:{
      name:{
   	type:String, //类型
   	required:true, //必要性
   	default:'abc' //默认值
      }
   }
   

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。