vue 组件父子，子父，兄弟通信

最新推荐文章于 2025-05-23 21:50:34 发布

知心光头

最新推荐文章于 2025-05-23 21:50:34 发布

阅读量153

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44190647/article/details/107974254

版权

本文详细介绍了Vue中组件间通信的三种主要方式：父传子、子传父和兄弟组件通信。父传子通过props实现，子传父使用$emit，兄弟组件间通信则可通过eventbus或vuex进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 组件父子，子父，兄弟通信

第一种：父传子：主要通过 props 来实现的
具体实现：父组件通过 import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

第二种：子传父：主要通过 $e m i t 来实现具体实现：子组件通过通过绑定事件触发函数，在其中设置 t h i s .$ emit(‘要派发的自定义事件’，要传递的值)，$emit 中有两个参数一是要派发的自定义事件，第二个参数是要传递的值

第三种：兄弟之间传值有两种方法：方法一：通过 event bus 实现
具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件 A 中通过 bus. $e m i t （ ’ 自定义事件名 ’ ，要发送的值）发送数据，在组件 B 中通过 b u s .$ on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接收数据

方法二：通过 vuex 实现
具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态