除了递归组件，Vue还有哪些常用的组件通信方式？
原创
除了递归组件，Vue还有哪些常用的组件通信方式？
原创
小焱
发布于 2025-09-20 08:13:45
发布于 2025-09-20 08:13:45
在 Vue 中，组件通信是非常核心的知识点，除了递归组件中常用的 props 传递方式外，还有多种常用的组件通信方式，适用于不同的场景：
1. Props / $emit（父子组件通信）
- 适用场景：父组件向子组件传递数据（props），子组件向父组件传递事件（$emit）
- 用法：
- 父组件通过
:propName="value" 向子组件传值 - 子组件通过
this.$emit('eventName', data) 触发事件，父组件用 @eventName 监听
// 父组件
<ChildComponent :message="parentMsg" @handleChange="handleChange" />
// 子组件
export default {
props: ['message'],
methods: {
sendData() {
this.$emit('handleChange', '来自子组件的数据')
}
}
}2. $parent / $children（父子组件通信）
- 适用场景：直接访问父/子组件实例（不推荐频繁使用，会增加耦合耦合度）
- 用法：
- 子组件中通过
this.$parent 获取父组件实例 - 父组件中通过
this.$children 获取子组件实例数组
// 子组件中访问父组件
this.$parent.parentMethod()
// 父组件中访问子组件
this.$children[0].childMethod()3. $refs（父子组件通信）
- 适用场景：父组件获取子组件实例或 DOM 元素
- 用法：
- 给子组件添加
ref 属性，如 <Child ref="childRef" /> - 父组件中通过
this.$refs.childRef 获取子组件实例
// 父组件
<ChildComponent ref="child" />
// 父组件中调用
this.$refs.child.childMethod()4. provide / inject（跨层级组件通信）
- 适用场景：深层嵌套的组件间通信（祖先爷孙辈向孙辈传递数据）
- 用法：
- 祖先组件用
provide 提供数据 - 后代组件用
inject 注入数据
// 祖先组件
export default {
provide() {
return {
theme: 'dark',
changeTheme: this.changeTheme
}
},
methods: {
changeTheme() { ... }
}
}
// 后代组件
export default {
inject: ['theme', 'changeTheme'],
mounted() {
console.log(this.theme) // 'dark'
}
}5. 事件总线（EventBus）（任意组件通信）
- 适用场景：中小型项目中任意组件间通信
- 用法：
- 创建一个全局事件总线实例
- 发送方用
$emit 触发事件，接收方用 $on 监听事件
// main.js 中创建
Vue.prototype.$bus = new Vue()
// 组件A发送事件
this.$bus.$emit('eventName', data)
// 组件B接收事件
mounted() {
this.$bus.$on('eventName', (data) => {
console.log(data)
})
}
// 组件B销毁时移除监听
beforeDestroy() {
this.$bus.$off('eventName')
}6. Vuex / Pinia（全局组件通信）
- 适用场景：大型项目中多组件共享状态
- 特点：
- 集中式状态管理，所有组件共享一个数据源
- 适合严格的规则保证状态变更的可追踪性
- Pinia 示例：
// store.js
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})
// 组件中使用
import { useStore } from './store'
const store = useStore()
console.log(store.count) // 访问状态
store.increment() // 调用方法7. $attrs / $listeners（多级组件透传）
- 适用场景：祖孙传递props和事件但不希望手动声明所有props
- 用法：
-
$attrs 包含父组件传递的非props属性 -
$listeners 包含父组件传递的事件监听器
// 中间组件
<ChildComponent v-bind="$attrs" v-on="$listeners" />选择建议：
- 父子组件：优先用 props/$emit
- 深层嵌套：用 provide/inject
- 任意组件：小型项目用 EventBus，大型项目用 Vuex/Pinia
- 父子组件直接操作：谨慎使用
parent/$children
根据项目规模和组件关系选择合适的通信方式，可以使代码更清晰、维护性更好。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
