Vue2 父子组件传值（简化版示例） - 详解

一、父组件向子组件传值（props）

父组件（Parent.vue）

我是父组件
import Child from './Child.vue'
export default {
components: { Child },
data() {
return {
parentMsg: '爸爸对你说：好好学习'  // 要传给子组件的数据
}
}
}

子组件（Child.vue）

我是子组件
父组件传来的话：{{ message }}
父组件传来的年龄：{{ userAge }}
export default {
// 简单声明接收的属性
props: ['message', 'userAge']
}

核心点：

• 父组件用 :属性名 传值
• 子组件用 props: ['属性名'] 接收
• 子组件直接用 {{ 属性名 }} 显示

二、子组件向父组件传值（$emit）

子组件（Child.vue）

我是子组件
export default {
data() {
return {
childMsg: '爸爸我饿了'  // 要传给父组件的话
}
},
methods: {
sendToParent() {
// 触发自定义事件，把数据传出去
this.$emit('child-talk', this.childMsg)
}
}
}

父组件（Parent.vue）

我是父组件
儿子对我说：{{ childWords }}
import Child from './Child.vue'
export default {
components: { Child },
data() {
return {
childWords: ''  // 存储子组件传来的话
}
},
methods: {
// 处理子组件传来的数据
listenChild(words) {
this.childWords = words
}
}
}

核心点：

• 子组件用 this.$emit('事件名', 数据) 发送
• 父组件用 @事件名 监听
• 父组件定义方法接收数据

三、双向绑定（v-model）

子组件（Child.vue）

export default {
props: ['value']  // 固定用value接收
}

父组件（Parent.vue）

父组件的值：{{ msg }}
import Child from './Child.vue'
export default {
components: { Child },
data() {
return {
msg: '初始内容'
}
}
}

核心点：

• 子组件固定接收 value 属性
• 子组件用 $emit('input', 新值) 发送修改
• 父组件直接用 v-model 绑定，实现双向同步

四、.sync 双向绑定用法

.sync 就是 Vue2 里父子组件 “双向传值” 的偷懒写法，不用写复杂代码，就能让父子数据同步。

1. 核心逻辑（1 句话懂）

• 父组件：用 :属性名.sync="父数据" 绑数据
• 子组件：改完数据后，用 this.$emit('update:属性名', 新值) 告诉父组件

2. 最简单示例（弹窗控制）

比如父组件控制弹窗显示 / 隐藏，弹窗关闭时也能更父子组件状态。

父组件（Parent.vue）

就 1 个关键：用 .sync 绑控制弹窗显示的变量

import Dialog from './Dialog.vue'
export default {
components: { Dialog },
data() {
return {
isShow: false // 控制弹窗显示的变量（默认隐藏）
}
}
}

子组件（Dialog.vue）

接收父组件的 visible → 关闭时用 $emit 传新值

我是弹窗
export default {
// 1. 接收父组件的 visible
props: ['visible'],
methods: {
close() {
// 2. 关键代码：告诉父组件“要隐藏了”
this.$emit('update:visible', false)
}
}
}

3. 效果

• 点父组件 “打开弹窗”：isShow 变 true，弹窗显示
• 点弹窗 “关闭”：子组件传 false 给父组件，isShow 变 false，弹窗隐藏

4. 关键注意

• 子组件必须写 update:属性名（比如 update:visible），少个字都不行
• 子组件不能直接改 props（比如 this.visible = false 是错的），必须用 $emit

5. 一句话总结用法

父用 :xxx.sync="父数据"，子用 $emit('update:xxx', 新值)，父子数据就同步了！

总结

Vue2 父子通信的本质是 “props 向下传值，$emit 向上触发事件”，所有双向绑定方案（v-model/.sync）都是这一本质的语法糖，核心遵循 “单向数据流” 原则：

通信方向	核心技术	关键操作
父 → 子	props	父绑自定义属性，子用 props 接收
子 → 父	$emit	子触发自定义事件，父监听事件并处理
双向同步	v-model/.sync	语法糖，简化 “props + $emit” 代码

掌握以上方案，就能解决 Vue2 中父子组件的所有通信需求。