在 vue 中,父子组件通信有四种常见方式。1. 父传子:通过 props 传递数据,子组件声明接收的属性,父组件绑定动态值;2. 子传父:使用 $emit 触发自定义事件,父组件监听并处理;3. 双向绑定:通过 v-model 实现,本质是 props 和 $emit 的语法糖,也可用 .sync 修饰符自定义;4. 方法调用:利用 ref 让父组件直接访问子组件的方法或数据。每种方式都有其适用场景,合理使用可提升代码清晰度与可维护性。

在 Vue 中,父子组件通信是开发中最基础也是最常用的功能之一。实现方式简单直接,但理解清楚每种方式的适用场景能让你写出更清晰、可维护的代码。
1. 父传子:通过 props
父组件向子组件传递数据,最常见的方式就是使用 props。你可以把 props 想象成子组件对外声明的“接收口”,父组件通过这个接口传值进去。
比如你有一个子组件 ChildComponent,它需要接收一个名字:
立即学习“前端免费学习笔记(深入)”;
你好,{{ name }}
父组件这样使用它:
这里用的是动态绑定(:name),这样父组件中的 parentName 数据一变,子组件也会同步更新。
注意点:
- props 是单向数据流,不建议在子组件中直接修改 props 的值。
- 可以给 props 设置类型校验和默认值,提高健壮性。
2. 子传父:通过自定义事件
子组件想通知父组件做点什么,通常是用 $emit 触发一个自定义事件,然后父组件监听这个事件。
比如你想让子组件点击按钮后告诉父组件一个信息:
父组件监听这个事件:
这种方式非常适合处理用户交互后的反馈,比如表单提交、选项变更等。
本文档主要讲述的是Android服务Service_详解;服务(Service)是Android系统中4个应用程序组件之一(其他的组件详见3.2节的内容)。服务主要用于两个目的:后台运行和跨进程访问。通过启动一个服务,可以在不显示界面的前提下在后台运行指定的任务,这样可以不影响用户做其他事情。通过AIDL服务可以实现不同进程之间的通信,这也是服务的重要用途之一。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看
3. 使用 v-model 实现双向绑定(其实是语法糖)
Vue 提供了 v-model 来简化父子组件之间的双向绑定,其实它底层还是基于 props 和 $emit。
比如你在子组件里定义了一个 value 的 prop,并在改变时触发 input 事件:
父组件就可以这样使用:
这等价于:
如果你不想用 value 和 input 这两个默认名,还可以用 .sync 修饰符或者自定义 model。
4. 父子组件方法调用(ref)
有时候你需要父组件直接调用子组件的方法,或者访问子组件的数据,可以用 ref。
比如你在子组件里写个方法:
父组件拿到这个 ref 后可以调用:
这种方式适合做一些初始化操作或主动触发子组件行为,但要小心别滥用,否则容易破坏组件封装性。
基本上就这些。父子通信看似简单,但在实际项目中合理选择方式,能让组件之间协作更顺畅,也更容易调试和维护。









