本文最后更新于 46 天前，其中的信息可能已经有所发展或是发生改变。
🔄 Vue父子组件通信的艺术 | Component Data Flow in Vue
📌 核心原则
单向数据流：Props向下传递，Events向上触发
🧩 基础通信模型
父组件 → 子组件 (Props传递)
<!-- ParentComponent.vue -->
<template>
<div class="parent">
<child-component :name="parentName" />
</div>
</template>
<script>
export default {
data() {
return {
parentName: '李四'
}
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div class="child">
<h3>接收到的父级名称：</h3>
<p>{{ name }}</p> <!-- 显示：李四 -->
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: '李三'
}
}
}
</script>
⚠️ 危险操作：直接修改Props
<!-- 错误示范 -->
<script>
export default {
created() {
setTimeout(() => {
this.name = '张三' // ❌ 直接修改prop
}, 2000)
}
}
</script>
✅ 正确通信方案：双向绑定模式
方案1：.sync修饰符（Vue 2.x）
<!-- ParentComponent.vue -->
<child-component :name.sync="parentName" />
<!-- ChildComponent.vue -->
<script>
export default {
methods: {
updateName() {
this.$emit('update:name', '张三') // ✅ 合法更新
}
}
}
</script>
方案2：v-model（推荐方式）
<!-- ParentComponent.vue -->
<child-component v-model:name="parentName" />
<!-- ChildComponent.vue -->
<script>
export default {
methods: {
updateName() {
this.$emit('update:name', '张三')
}
}
}
</script>
🗂 通信方式对比表
| 方法 | 适用场景 | 数据流向 | Vue版本 |
|---|---|---|---|
| Props | 父→子单向传递 | 单向 | 2.x/3.x |
| .sync | 简单双向绑定 | 双向 | 2.x |
| v-model | 表单类双向绑定 | 双向 | 2.x/3.x |
| Event Bus | 跨层级通信 | 任意 | 2.x/3.x |
💡 最佳实践提示
- 数据验证：始终为props指定类型和默认值
- 变更策略：子组件通过事件请求父组件变更数据
- 状态提升：复杂场景考虑使用Vuex/Pinia
- 版本适配：Vue3推荐使用
v-model替代.sync
🌐 版本差异说明
+ Vue3更新日志：
- 移除.sync修饰符
+ 支持多个v-model绑定
+ 新增自定义v-model参数
📚 扩展阅读推荐
▶️ Vue官方组件通信指南
▶️ 深入理解Vue响应式原理
▶️ Pinia状态管理实战
