Vue.js组件通信是开发中的核心环节，主要方式包括：父子组件通过props（父传子）和$emit（子传父）通信；跨层级组件使用provide/inject共享数据；非父子组件可通过EventBus（Vue3推荐mitt库）或状态管理工具（Vuex/Pinia）实现数据同步；slot插槽用于父组件向子组件传递内容；Vue2中还可通过$refs直接访问子组件实例，这些方式覆盖了从简单到复杂的多种通信场景。
Vue.js组件通信全解析：从基础到高级的7种核心方式
在Vue.js的组件化开发中，组件间的通信是构建复杂应用的核心能力，由于Vue推崇"单向数据流"和"组件隔离"的设计理念，不同层级的组件（父子、兄弟、跨级）或非关系组件之间需要通过特定方式传递数据或触发事件，本文将系统梳理Vue.js中组件通信的7种核心方式，从基础到进阶，帮助开发者根据具体场景选择最优方案。
Props与$emit：父子组件通信的基石
Props与$emit是Vue中最基础、最常用的父子组件通信方式，严格遵循"单向数据流"原则，确保数据流向的可预测性。
Props：父组件向子组件传递数据
父组件通过在子组件标签上绑定属性,将数据传递给子组件；子组件通过props选项接收这些数据。
实现方式：
<!-- 父组件 -->
<template>
<div>
<ChildComponent :message="parentMsg" :user="userInfo" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
parentMsg: 'Hello from Parent',
userInfo: { name: 'Alice', age: 25 }
}
}
}
</script>
<!-- 子组件（通过props接收） -->
<template>
<div>
<p>Message from parent: {{ message }}</p>
<p>User name: {{ user.name }}</p>
</div>
</template>
<script>
export default {
// props可以是数组或对象，对象支持类型校验、默认值、必填校验
props: {
message: String, // 类型校验
user: {
type: Object,
required: true, // 必填校验
default: () => ({ name: 'Guest' }) // 默认值
}
}
}
</script>
注意事项：
props是只读的，子组件不应直接修改props数据（会触发Vue的警告），如需修改可通过$emit通知父组件处理。- 支持多种数据类型（String、Number、Boolean、Array、Object、Function、Symbol），可通过
type进行校验，校验失败会在开发环境抛出警告。 - 在Vue 3中，props的响应式处理有所优化，可以使用
toRefs或toRef来保持响应性。
$emit：子组件向父组件传递事件与数据
子组件通过$emit触发自定义事件，并传递数据，父组件通过v-on（或）监听事件并接收数据。
实现方式：
<!-- 子组件（触发事件） -->
<template>
<div>
<button @click="handleClick">Send Data to Parent</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 触发自定义事件，并传递数据
this.$emit('update-user', { name: 'Bob', age: 30 })
}
}
}
</script>
<!-- 父组件（监听事件） -->
<template>
<div>
<ChildComponent @update-user="handleUserUpdate" />
<p>Updated user: {{ currentUser.name }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
currentUser: { name: 'Alice', age: 25 }
}
},
methods: {
handleUserUpdate(newUserData) {
this.currentUser = newUserData
}
}
}
</script>
典型场景：
- 子组件需要通知父组件某些操作（如按钮点击、表单提交）
- 父组件需要根据子组件的状态变化更新自身数据（如子组件分页变化时，父组件重新获取数据）
- 表单输入的双向绑定场景（使用
v-model）
$refs与$parent/$children：直接访问组件实例
当需要直接访问子组件或父组件的实例方法、数据时，可通过$refs（子组件引用）和$parent/$children（父子实例访问）实现。
$refs：父组件直接访问子组件
父组件通过给子组件添加ref属性，获取子组件的实例，进而调用其方法或访问数据。
实现方式：
<!-- 父组件 -->
<template>
<div>
<ChildComponent ref="child" />
<button @click="callChildMethod">Call Child Method</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
methods: {
callChildMethod() {
// 通过refs访问子组件实例
this.$refs.child.childMethod()
console.log(this.$refs.child.childData) // 访问子组件数据
}
}
}
</script>
<!-- 子组件 -->
<script>
export default {
data() {
return {
childData: 'This is child data'
}
},
methods: {
childMethod() {
console.log('Child method called!')
}
}
}
</script>
注意事项：
$refs在组件挂载后才生效，需在mounted或updated钩子中使用- 适用于需要直接操作子组件的场景（如表单校验、动画控制），但过度使用会破坏组件封装性，建议优先通过
props和$emit通信 - 在Vue 3中，
$refs的访问方式保持不变，但组合式API中需要通过ref来创建引用
$parent/$children：子组件访问父组件/兄弟组件
$parent：子组件通过this.$parent访问父组件实例，可调用父组件方法或访问父组件数据$children：父组件通过this.$children访问所有子组件实例数组（注意：顺序是组件定义顺序，不保证响应式）
示例：
<!-- 子组件中访问父组件 -->
<script>
export default {
methods: {
accessParent() {
const parentData = this.$parent.parentData
this.$parent.parentMethod()
}
}
}
</script>
注意事项：
$parent和$children打破了组件的封装性，应谨慎使用- 在Vue 3中，推荐使用
provide/inject替代$parent访问 $children数组不是响应式的，不建议直接依赖它进行数据绑定
EventBus：事件总线通信
EventBus是一种发布-订阅模式，适用于任意组件间的通信，特别适合兄弟组件或跨层级组件通信。
实现方式
// eventBus.js import Vue from 'vue' export const EventBus = new Vue()
<!-- 发送事件的组件 -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import { EventBus } from './eventBus.js'
export default {
methods: {
sendMessage() {
EventBus.$emit('message', 'Hello from EventBus!')
}
}
}
</script>
<!-- 接收事件的组件 -->
<template>
<div>{{ receivedMessage }}</div>
</template>
<script>
import { EventBus } from './eventBus.js'
export default {
data() {
return {
receivedMessage: ''
}
},
created() {
EventBus.$on('message', (msg) => {
this.receivedMessage = msg
})
},
beforeDestroy() {
// 记得在组件销毁时移除事件监听
EventBus.$off('message')
}
}
</script>
**注意事项
