论文查重检测
80.49M · 2026-03-22
在 Vue.js 开发中，组件是构建用户界面的基本单元。一个复杂的应用通常由多个组件嵌套组成，而这些组件之间需要频繁地进行数据交换和事件通知，这就是组件通讯。掌握各种组件通讯方式，对于构建可维护、可扩展的 Vue 应用至关重要。
本文将详细介绍 Vue 2 和 Vue 3 中常用的组件通讯方式，并提供实用的代码示例。
props 是最基础的父子组件通讯方式，父组件通过属性向子组件传递数据。
Vue 3 示例：
<!-- 父组件 Parent.vue -->
<template>
<ChildComponent :message="parentMessage" :count="42" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'
const parentMessage = ref('Hello from Parent')
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<p>{{ message }}</p>
<p>Count: {{ count }}</p>
</div>
</template>
<script setup>
defineProps({
message: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>
最佳实践：
子组件通过 $emit 触发事件，将数据传递给父组件。
Vue 3 示例：
<!-- 子组件 ChildComponent.vue -->
<template>
<button @click="sendMessage">Send to Parent</button>
</template>
<script setup>
const emit = defineEmits(['custom-event', 'update:modelValue'])
const sendMessage = () => {
emit('custom-event', { data: 'Hello from Child', timestamp: Date.now() })
}
</script>
<!-- 父组件 Parent.vue -->
<template>
<ChildComponent @custom-event="handleChildEvent" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const handleChildEvent = (payload) => {
console.log('Received from child:', payload)
}
</script>
Vue 3.3+ 新特性： 可以使用 defineModel 简化双向绑定：
<!-- 子组件 -->
<script setup>
const modelValue = defineModel() // 自动处理 props 和 emit
</script>
<template>
<input v-model="modelValue" />
</template>
兄弟组件之间没有直接的通讯方式，通常需要通过共同的父组件作为中介。
<!-- 父组件 -->
<template>
<div>
<SiblingA :shared-data="sharedData" @update-data="updateSharedData" />
<SiblingB :shared-data="sharedData" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import SiblingA from './SiblingA.vue'
import SiblingB from './SiblingB.vue'
const sharedData = ref('Initial data')
const updateSharedData = (newData) => {
sharedData.value = newData
}
</script>
适用于祖孙组件或多层嵌套场景，避免 props 逐层传递（prop drilling）。
Vue 3 示例：
<!-- 祖先组件 -->
<template>
<div>
<DeepChild />
</div>
</template>
<script setup>
import { provide, ref } from 'vue'
import DeepChild from './DeepChild.vue'
const theme = ref('dark')
const user = ref({ name: 'Alice', role: 'admin' })
provide('theme', theme)
provide('user', user)
</script>
<!-- 后代组件（任意层级） -->
<template>
<div>
<p>Theme: {{ theme }}</p>
<p>User: {{ user.name }}</p>
</div>
</template>
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
const user = inject('user')
</script>
注意事项：
provide/inject 不是响应式的，除非传递的是响应式对象（ref/reactive）问题：使用 props 和 emits 时，组件的输入和输出在代码中是显式声明的。阅读父组件代码，你一眼就能看出子组件需要什么数据、会触发什么事件。
对比：provide/inject 建立了一种隐式依赖。
后果：当项目变大时，这种隐式连接会让数据流向变得难以追踪（“魔术字符串”问题）。如果你修改了 provide 中的某个值，可能会意外影响到深层嵌套中多个未知的组件，导致“牵一发而动全身”。
问题：一个高度依赖 inject 的组件，必须要在特定的祖先组件环境下才能正常工作。
后果：如果你想把这个组件复用到另一个页面或另一个项目中，如果那个环境没有提供对应的 provide，组件就会报错或行为异常。这使得组件变成了“环境依赖型”组件，而不是独立的通用组件。
inject('theme') 才能渲染颜色，那它在没有主题上下文的地方就很难单独使用。props 传入 color 或 theme。props 可以通过 Vue DevTools 清晰地看到数据在组件树中的传递路径。provide/inject 时，数据像是“瞬移”到子组件的。在大型应用中，很难快速定位是哪个祖先组件提供的值出了问题，或者是哪个子组件意外修改了注入的响应式对象。provide/inject 有了很好的类型支持，但相比于 defineProps 的自动类型推导，inject 往往需要手动定义类型接口或泛型，稍微繁琐一些，且在重构时（如修改 key 名称）不如 props 那样容易通过 IDE 全局搜索和替换来保证安全。provide/inject？尽管有上述缺点，它在以下场景是最佳选择：
开发组件库（UI Library） ：
provide/inject 的主战场。例如，一个 Table 组件和一个 TableCell 组件。你不可能让使用者在每个 TableCell 上都手动写一遍 :table-context="..."。此时，Table 组件 provide 上下文，TableCell inject 上下文，是极其合理且必要的。深层嵌套的全局配置：
props 逐层传递（Prop Drilling），中间层的组件会被迫传递它们自己并不需要的数据，代码非常冗余。避免 Prop Drilling：
provide/inject 可以显著简化代码结构。用于透传属性和事件，常用于高阶组件或封装场景。
Vue 3 示例：
<!-- WrapperComponent.vue -->
<template>
<BaseInput v-bind="$attrs" />
</template>
<script setup>
// 默认情况下，$attrs 包含所有未声明的 props
// 如果需要事件，需要在 emits 中声明或使用 v-on="$attrs"
</script>
<style>
/* 禁用继承样式 */
:root {
inheritAttrs: false;
}
</style>
对于大型应用，推荐使用状态管理库。
Pinia 是 Vue 官方推荐的状态管理库，比 Vuex 更简洁、类型友好。
npm install pinia
// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
<!-- 组件中使用 -->
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<p>Double: {{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">Increment</button>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
</script>
虽然 Pinia 是未来趋势，但许多项目仍在使用 Vuex。
在 Vue 2 中常用空的 Vue 实例作为事件总线，但在 Vue 3 中由于移除了 $on、$off、$once，不再推荐使用。如需类似功能，可使用第三方库如 mitt。
npm install mitt
// eventBus.js
import mitt from 'mitt'
export const emitter = mitt()
<!-- 发送方 -->
<script setup>
import { emitter } from '@/eventBus'
const sendData = () => {
emitter.emit('custom-event', { message: 'Hello' })
}
</script>
<!-- 接收方 -->
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { emitter } from '@/eventBus'
const handleEvent = (data) => {
console.log('Received:', data)
}
onMounted(() => {
emitter.on('custom-event', handleEvent)
})
onBeforeUnmount(() => {
emitter.off('custom-event', handleEvent)
})
</script>
用于父组件直接访问子组件的实例或 DOM 元素。
<template>
<button @click="callChildMethod">Call Child Method</button>
<ChildComponent ref="childRef" />
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const childRef = ref(null)
const callChildMethod = () => {
if (childRef.value) {
childRef.value.childMethod()
}
}
</script>
| 场景 | 推荐方式 |
|---|---|
| 父传子 | Props |
| 子传父 | Emit / defineModel |
| 兄弟组件 | 状态提升到共同父组件 |
| 跨多层级 | Provide/Inject 或 Pinia |
| 全局状态 | Pinia（首选）或 Vuex |
| 封装组件透传 | $ attrs |
| 直接调用子组件方法 | Template Refs |
<script setup> 让组件通讯更清晰Vue 提供了丰富灵活的组件通讯机制，从简单的 props/emits 到强大的状态管理工具。选择合适的通讯方式取决于具体的应用场景。理解每种方式的优缺点，并在项目中合理运用，是构建高质量 Vue 应用的关键。
随着 Vue 生态的发展，Pinia 已成为状态管理的首选，而组合式 API 也让组件间的逻辑复用变得更加优雅。持续学习并实践这些模式，将帮助你在 Vue 开发道路上走得更远。
