1、一种组件间通信的方式,适用于任意组件间通信
2、使用步骤:
1、安装pubsub: npm i pubsub-js
3、接受数据:A组件想接受数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){
demo(data){....}
....
mounted(){
this.pubId = pubsub.subscribe('xxx',this.demo) //订阅消息 或者直接在内部写成箭头函数形式
}
}
4、提供数据: pubsub.publish('xxx',数据)
5、最好在beforeDestrory钩子中,用pubsub.unsubscribe(pubId)去取消订阅
步骤:
哪个组件接受数据 就在哪个组件中订阅消息,订阅的回调留在自身。
发送消息:
在vue 中组件通信可以通过自定义属性 、发布订阅事件,而在react中都是用props来进行通信,但是这一通信局限于父子组件之间,如果是相邻兄弟或者爷孙这种组件通信呢?可以借助于一个第三方库 pubsub-js来进行消息的订阅与发布,具体使用方式如下:
注意:child1组件和child2组件都要引入pubsub 才可以使用