说一说组件通信的方式？_

牛客663468082号

1、父子组件通信常用props和$emit还有$refs；2、兄弟组件通信常用定义的公共事件bus的$on、$emit；3、祖先和子孙组件通信常用$attrs和$listener、provide和inject；4、复杂通信常用vuex

发表于 2022-05-26 16:48:38 回复(2)

AuguestX

父传子在子组件中定义props，子传父使用$emit()自定义事件，还有事件总线bus

发表于 2022-04-26 13:15:00 回复(0)

牛客919075960号

Vue的组件通信一般分为三大类。1：父子组件通信，最常见的使用props和emit，父组件通过props将数据传递给子组件，子组件通过emit触发父组件中的方法来修改数据。其次还可以通过$ref、$parent和$child进行通信。2:祖孙组件之间的通信:这种通信一般也可以用props和emit只不过逐层传递会很麻烦，可以可以使用$listener和$attrs来进行通信。3:兄弟组件之间的通信:可以创建eventBus事件总线，通过$emit和$on的方式进行通信。其次还有全局数据通信，我们可以使用Vuex作为全局状态管理来实现。

发表于 2022-08-04 16:48:59 回复(0)

乐扣乐扣

1.父与子通信：父组件通过props传递给子组件 + 子组件通过自定义事件this.$emit传递给父组件 2.eventBus：适用于所有组件间通信，所有组件共用一条事件总线，接收数据方eventBus.$on注册自定义事件的回调函数，发送数据方eventBus.$emit触发自定义事件发送消息。 3.vuex：适用于所有组件间通信，全局状态管理。state用于存储共享变量，mutations用于响应式更新共享变量，actions用于异步响应式更新共享变量。

编辑于 2022-08-18 15:31:38 回复(0)

cmls

父子：props，emit，refs
兄弟：eventbus，emit
隔代：inject，provide，attr，listener
不传火了：vuex，pinia

发表于 2022-06-26 23:00:24 回复(1)

达名

讲的不够全哦

发表于 2023-03-07 19:49:08 回复(0)

牛客290958026号

1.父子：props,emit,refs 2.兄弟：eventbus,emit 3.隔代：inject,provide,attr,listener 4.复杂关系：vuex,pinia

发表于 2022-08-01 09:04:15 回复(0)

又熬夜了的牛油果很孤独

父子组件通信通过props emit refs，兄弟之间用eventbus，$on,$emit;任何组件之间用vuex

发表于 2024-11-12 15:02:46 回复(0)

贪睡的鲸鱼准备进厂

父子通信、祖孙通信、兄弟通信、全局通信 1.父子通信：父组件通过props发送数据，子组件通过emit接收数据 2.祖孙通讯：也可以用props和emit逐层通信，但是太过麻烦，可以用listener和attrs通信 3.兄弟通信：创建一个evenbus实例，调用实例的emit发送数据，on接收数据全局通信：创建vuex仓库

发表于 2024-10-31 17:14:29 回复(0)

我已成为0offer的糕手

### 1. **父子组件的通信**： - **父传子**：父组件通过向子组件添加 **自定义属性** 传递数据，如 ``。子组件通过 `props` 接收父组件的数据，如 `props: ['list']`。`props` 是只读的，不能直接修改。 - **子传父**：子组件通过 `$emit` 触发自定义事件，将数据传递给父组件。例如，父组件将一个方法传给子组件 ``，子组件通过 `this.$emit('delete', item)` 调用父组件的方法并传递参数。 - **VueX**：适用于大型项目，集中管理应用的公共状态。Vuex 提供了一个全局的、响应式的状态存储，当组件从 store 中读取状态时，状态变化会自动更新对应的组件。通过 `commit` 提交 **mutation** 修改 store 中的状态，不能直接修改。Vuex 适用于复杂的状态管理和多组件间共享数据，解决了多层组件传递数据的繁琐问题。

发表于 2024-10-12 17:30:40 回复(0)

一个编程牛

props、$emit、EventBus、$on、VueX

发表于 2024-09-03 22:09:11 回复(0)

拾加柒

1、props / $emit 2、全局事件总线 3、vuex 4、第三方插件（例：消息订阅与发布） 5、$listener和$attrs / inject，provide

发表于 2024-06-05 15:00:00 回复(0)

未命名小孩

1.父与子通信：父组件通过props传递给子组件 + 子组件通过自定义事件this.$emit传递给父组件，还有$ref, 2.祖孙通信，provide,inject.3.eventBus：适用于所有组件间通信，所有组件共用一条事件总线，接收数据方eventBus.$on注册自定义事件的回调函数，发送数据方eventBus.$emit触发自定义事件发送消息。 4.vuex：适用于所有组件间通信，全局状态管理。state用于存储共享变量，mutations用于响应式更新共享变量，actions用于异步响应式更新共享变量。

发表于 2024-05-22 09:12:06 回复(0)

牛客768251747号

父子通信：props，emit，refs，parent，child 兄弟通信：bus事件总线，emit 子孙：listener和attrs，provide和inject 全局通信：vuex,pinia

发表于 2024-04-30 11:07:25 回复(0)

牛客563280983号

1、父组件向子组件传值用props，子组件向父组件传值用$emit 2、还可以通过$refs拿到子组件中的属性和方法；3、父组件通过provide向子组件传值，子组件通过inject取值 4、通过状态管理vuex

编辑于 2024-03-22 10:44:03 回复(0)

小菜🐔

父子：props，$emit,$ref 兄弟：eventbus 复杂：vuex

编辑于 2024-03-03 17:21:13 回复(0)

威猛的无尾熊最喜欢秋天

父子组件通信： props $emit $refs 兄弟组件通信：通过父组件通信、bus的$on、$emit 祖先和子孙组件： $attrs和$listener、provide和inject 还可以采用vuex 全局管理数据

编辑于 2024-02-22 12:36:49 回复(0)

橘子皮的皮卡丘

父传子：将父组件要传递给子组件的值以一个自定义属性的形式绑定在子组件标签上，在子组件中以props接收参数子传父：在父组件中定义一个自定义事件，在子组件中通过$emit触发事件传递参数，this.$emit('方法名',参数) entBus：使用方法是创建一个新的Vue实例，需要通信的组件都引入该Vue实例，传递数据的组件使用` event.$emit('名称',参数)`发送数据，接收数据的组件使用 `event.$on('名称',方法)`接收数据 Vuex实现任意组件间传值

发表于 2023-10-24 10:07:11 回复(0)

kumoko

1.父子通信：父组件通过Props传递给子组件，子组件通过$emit传递给父组件 2.Vuex 3.$refs，父组件通过访问该组件的实例 4.$parent 和 $children 5.eventbus

发表于 2023-10-10 19:36:29 回复(0)

愿offer多多的放鸽子能手很谦虚

1.父与子通信：父组件通过props传递给子组件，子组件通过自定义事件this.$emit传递给父组件，还有$refs 2.eventBus：适用于所有组件间通信，所有组件公用一条事件总线；接收数据方eventBus.$on注册自定义事件的回调函数，发送方eventBus.$emit触发自定义事件发送消息。 3.祖孙通信：①在祖组件中，使用provide提供数据或方法给后代组件。在孙组件中，使用inject接收祖组件提供的数据或方法。 ②在祖组件中，使用v-on="$listeners"绑定监听器，实现孙 -> 祖通信。在孙组件中，访问$attrs对象获取祖组件传递的属性的值 4.Vuex：适用于所有组件间通信，全局状态管理。state用于存储共享变量，mutations用于响应式更新共享变量，actions用于异步响应式更新共享变量。

发表于 2023-09-05 20:02:44 回复(0)

说一说组件通信的方式？

问题信息

热门推荐

相关试题