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