Vue组件间的通信和消息订阅

组件的自定义事件

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

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

3.绑定自定义事件:
1.第一种方式，在父组件中:<Demo @su="test"/>或<Demo v-on:su="test"/>
2.第二种方式，在父组件中:

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

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

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

5.解绑自定义事件: this.$off( ' su ')

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

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

全局事件总线(GlobalEventBus)

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

• 安装全局事件总线：

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

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

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

提供数据：this.$bus.$emit( 'xxxx',数据)

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

消息订阅与发布(pubsub)

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

• 使用步骤：

  • 安装pubsub: npm i pubsub-js

  • 引入: import pubsub from 'pubsub-js'

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

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

  • 提供数据:pubsub.publish( 'xxx ',数据)

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

nextTick

• 语法：this.$nextTick(回调函数)
• 作用：在下一次DOM更新结束后执行其指定的回调。
• 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。