vue中组件之间的通信
一、vue中组件通信的种类
- 父组件向子组件的通信
- 子组件向父组件的通信
- 隔代组件之间的通信
- 兄弟 组件 之间的通信
二、实现通信的方式
- props
- vue自定义的事件
- 消息订阅与发布
- vuex
- 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