vue中组件之间的通信

一、vue中组件通信的种类

1. 父组件向子组件的通信
2. 子组件向父组件的通信
3. 隔代组件之间的通信
4. 兄弟 组件 之间的通信

二、实现通信的方式 

1. props
2. vue自定义的事件
3. 消息订阅与发布
4. vuex
5. slot

三、具体怎么实现

3.1、props

• 可以通过一般的属性实现父向子组件的通信
• 可以通过函数属性实现子向父组件的通信

　缺点：隔代组件和兄弟组件之间的通信比较麻烦

  3.2、vue自定义的事件

• vue内置实现，可以代替函数类型的props

　　　　绑定监听：<MyComp @eventName="callback">

　　　　触发事件：this.$emit("eventName",data)

　缺点：只适合子向父通信

　3.3、消息订阅与发布 

• 需要引入消息订阅与发布的实现库，如pubsub-js

　　　　订阅消息 ：PubSub.subscribe('msg',(msg,data)=>{})

　　　　发布消息 :  PubSub.publish('msg',data)

　优点：此方式可以实现任意组件之间的通信

3.4、vuex

• vuex是集中式管理 vue多组件共享状态数据的vue插件

优点：对组件之间的关系没有限制 ，相比于pubsub库管理更加集中

  3.5、 slot

• slot是专门用来实现父向子 传递 带数据 的标签

参考文章：https://www.cnblogs.com/lhb25/p/10-way-of-vue-data-interact.html