在
vue
中，父子组件通信有四种常见方式。1. 父传子：通过 props 传递数据，子组件声明接收的属性，父组件绑定动态值；2. 子传父：使用 $emit 触发自定义事件，父组件监听并处理；3. 双向绑定：通过 v-model 实现，本质是 props 和 $emit 的语法糖，也可用 .sync 修饰符自定义；4. 方法调用：利用 ref 让父组件直接访问子组件的方法或数据。每种方式都有其适用场景，合理使用可提升代码清晰度与可维护性。
在 Vue 中，父子组件通信是开发中最基础也是最常用的功能之一。实现方式简单直接，但理解清楚每种方式的适用场景能让你写出更清晰、可维护的代码。
1. 父传子：通过 props
父组件向子组件传递数据，最常见的方式就是使用
。你可以把
想象成子组件对外声明的“接收口”，父组件通过这个接口传值进去。
比如你有一个子组件
，它需要接收一个名字：
立即学习
“
前端免费学习笔记（深入）
”；
父组件这样使用它：
这里用的是动态绑定（
），这样父组件中的
数据一变，子组件也会同步更新。
注意点：
props 是单向数据流，不建议在子组件中直接修改 props 的值。
可以给 props 设置类型校验和默认值，提高健壮性。
2. 子传父：通过自定义事件
子组件想通知父组件做点什么，通常是用
触发一个自定义事件，然后父组件监听这个事件。
比如你想让子组件点击按钮后告诉父组件一个信息：
父组件监听这个事件：
这种方式非常适合处理用户交互后的反馈，比如
表单提交
、选项变更等。
Vue-router参考手册
Vue-router参考手册下载
下载
3. 使用 v-model 实现双向绑定（其实是语法糖）
Vue 提供了
来简化父子组件之间的双向绑定，其实它底层还是基于
和
。
比如你在子组件里定义了一个
的 prop，并在改变时触发
事件：
父组件就可以这样使用：
这等价于：
如果你不想用
和
这两个默认名，还可以用
修饰符或者自定义 model。
4. 父子组件方法调用（ref）
有时候你需要父组件直接调用子组件的方法，或者访问子组件的数据，可以用
。
比如你在子组件里写个方法：
父组件拿到这个 ref 后可以调用：
这种方式适合做一些初始化操作或主动触发子组件行为，但要小心别滥用，否则容易破坏组件
封装性
。
基本上就这些。父子通信看似简单，但在实际项目中合理选择方式，能让组件之间协作更顺畅，也更容易调试和维护。
propspropsChildComponent
你好，{{ name }}
:nameparentName$emit
v-modelprops$emitvalueinput
valueinput.syncref