vue实现组件通信的5中方式

Posted 2021-11-21 江州益彤

通信种类

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

1、props

1)通过一般属性实现父向子通信
2)通过函数属性实现子向父通信
3)缺点:隔代组件和兄弟组件间通信比较麻烦

2、vue自定义事件

1)vue内置实现，可以代替函数类型的props
a.绑定监听:<MyComp @eventName=“callback”
b.触发(分发)事件: this.$emit( “eventName”, data)
2)缺点:只适命于子向父通信

3、消息订阅与发布

1)需要引入消息订阅与发布的实现库，如: pubsub-js
a.订阅消息:PubSub.subscribe( ‘msg’, (msg, data)=>{})
b.发布消息:PubSub.publish(‘msg’, data)
2)优点:此方式可用于任意关系组件间通信

4、vuex

1)是什么:vuex是 vue官方提供的集中式管理vue多组件共享状态数据的vue插件
2)优点:对组件间关系没有限制，且相比于pubsub 库管理更集中，更方便

5、slot

1)是什么:专门用来实现父向子传递带数据的标签
a.子组件
b.父组件
2)注意:通信的标签模板是在父组件中解析好后再传递给子组件的