Vue组件间通信

Vue组件间通信

组件关系	组件间传值方法一	组件间传值方法二	组件间传值方法三	组件间传值方法四
父传子	props传值	全局事件总线（行但没必要）	消息订阅与发布（行但没必要）	vuex
子传父	子组件调用props传的回调函数	自定义事件	全局事件总线（行但没必要）	vuex
祖孙间传值	全局事件总线	消息订阅与发布（行但没必要）	vuex	(欢迎补充)

• 全局事件总线本质上就是自定义事件 是任意组件之间都可以通信的（这个更好一点因为完全是Vue的 完全利用了Vue自定义事件还不用引入库）

• 消息订阅与发布也是任意组件之间都可以通信的

消息订阅需要下载库 库可以选择pubsub-js需要 npm i pubsub-js

然后在代码中引入

import pubsub from 'pubsub-js'

其中pubsub是一个对象，

使用：

1、订阅消息：

pubsub.subscribe('消息名'回调函数)

这样就订阅消息成功，等人发布消息

2、发布消息：

pubsub.publish('消息名'，传递的数据)

3、消息需要取消订阅

pubsub.unsubscribe(订阅的id)

举例：

//发布消息
pubsub.publish('hello',data);
//订阅消息 可放在mounted()钩子里面
this.pubId = pubsub.subscribe('hello',function(msgName,data){
    函数体
    //这个回调函数里面的this是undefined
    this === undefined //true
})
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
    函数体
    //这个回调函数里面的this是VueComponent组件
})

demo((msgName,data){函数体}
this.pubId = pubsub.subscribe('hello',this.demo)//demo函数写在methods里面 这样this也是VueComponent
//取消订阅 可放在beforeDestory()钩子里面
pubsub.unsubscribe(pubId)

个人记录学习使用，转载请联系我先，如有错误，欢迎指正呀