最详细 Vue 组件通信的 8 种方式！！
最新回答
小棉袄
2026-05-16 13:06:47
1. **父子组件间的通信**：
- **父组件向子组件传递**：父组件的值，无论类型如何，都只能通过属性直接传给子组件。
- **子组件向父组件传递**：子组件通过发送自定义事件，使用`this.$emit('自定义事件名', 传递参数)`将数据传递给父组件。
2. **非父子组件间的通信**：可以通过创建全局的公式实例，实现组件间的值传递。
3. **父组件获取子组件的值**：使用`$refs`属性，父组件可以通过给子组件元素绑定ref属性，从而获取到子组件的值。
4. **子组件获取父组件实例**：使用`$parent`，子组件可以通过`$parent`获取到父组件的实例，进而访问父组件的属性和方法。
5. **$attrs和$listeners获取父组件信息**：在组件嵌套场景中，可以利用`$attrs`和`$listeners`来获取父组件的属性和事件监听器，避免使用Vuex进行数据处理。
以上5种方式覆盖了大部分组件通信场景，而第6种方式（$attrs和$listeners的使用）在多层嵌套组件时非常实用，能方便地传递业务数据，避免冗余的代码。最后，了解这6种方式之外的通信方式，对于深入掌握Vue组件通信规则同样有益。
热门标签
