Vue中组件间传值的方式有哪些?(清晰明了)

最新推荐文章于 2023-07-29 19:22:56 发布

煮豆燃豆萁~

最新推荐文章于 2023-07-29 19:22:56 发布

阅读量259

点赞数

文章标签： scss less 前端

本文链接：https://blog.csdn.net/qq_43962582/article/details/121582295

版权

本文详细介绍了Vue中组件间的多种通信方式，包括props、$emit/$on、eventbus、$refs、vuex、$root、$parent、$children、provide/inject、$attrs和$listeners。这些方法覆盖了父子、兄弟以及跨层级组件的通信需求，帮助开发者更好地理解和掌握Vue应用中的数据流动。

摘要由CSDN通过智能技术生成

序号	方式	使用场景	说明
1	props	父=>子(属性传参)	接收数据:子组件中props定义接收派发数据:父组件中绑定的数据进行派发
2	$emit/$on	子=>父组件通信(事件传参)	接收数据:父组件调用$on/v-on 派发数据:子组件调用$emit()
3	event bus	兄弟组件通信跨层级组件通信	*自定义观察者模式Bus并挂载到根Vue 接收数据:对应组件调用$on 派发数据:对应组件调用$emit()
4	$refs	父子组件通信	通过$refs获取子节点引起直接操作
5	vuex	兄弟组件通信跨层级组件通信	详情参考vuex中文文档
6	$root	兄弟组件通信	接收数据:对应组件调用根组件的$on 派发数据:对应组件调用根组件的$emit()
7	$parent	父子组件通信兄弟组件通信	接收数据:对应组件调用公共组件的$on 派发数据:对应组件调用公共组件的$emit()
8	$children	父子组件通信	通过$children获取并查找指定子节点后直接操作
9	provide/inject	跨多层级组件通信	接收数据:孙辈组件通过定义inject获取数据派发数据:父辈组件中通过定义provide设置数据
10	$attrs	父=>孙(非属性特定传值)	---场景1---父孙传参------------------------------------ 接收数据:孙辈组件中通过props定义接收桥接数据:子组件中通过v-bind="$attrs"展开派发数据:父组件中绑定数据进行派发 ---场景2---父子传参------------------------------------ 接收数据:子组件中$attrs.xxx获取数据派发数据:父组件中绑定数据进行派发
11	$listeners	孙=>父(事件传参)	---场景1---孙父传参------------------------------------ 接收数据:父组件调用$on/v-on 桥接数据:子组件中通过v-bind="$listeners"展开派发数据:子组件调用$listeners.xxx() ---场景2---子父传参------------------------------------ 接收数据:父组件调用$on/v-on 派发数据:子组件调用$listeners.xxx()