- 一种组件间通信的方式,适用于任意组件间通信
- 使用步骤:
(1)安装pubsub:npm i pubsub-js
(2)引入import pubsub from 'pubsub-js'
(发收方都要导入)
(3)接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
methods(){
demo(evenName,data){
//eventName事件名称,data是发布者传递过来的数据
}
......,
},
mounted(){
//写法一
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
//写法二
this.pid = pubsub.subscribe('xxx',(eventName,data)=>{
console.log(eventName,data)
})
},
beforeDestory(){
Pubsub.unsubscribe(pid)
//取消订阅
}
(4)提供数据:pubsub.publish('xxx',数据)
(5)最好在beforeDestroy钩子中,用pubsub.unsubscribe()
补充 nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次DOM更新结束后执行其指定的回调
- 使用场景:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行