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所指定的回调函数中执行。