Vue 父子组件的核心交互逻辑围绕「数据向下传递、事件向上触发」展开，以下是实际业务中最常用的 5 类场景，均基于 Vue3 组合式 API（主流用法）演示：
场景 1：父组件向子组件传递数据（Props）
业务场景：父组件加载列表数据，子组件负责展示单条数据（如商品卡片、用户信息项）。
父组件（Parent.vue）
<template> <div class="parent"> <h3>父组件</h3> <!-- 向子组件传递商品数据 --> <Child :product="productInfo" /> </div> </template> <script setup> import Child from './Child.vue' // 父组件的数据源 const productInfo = { id: 1001, name: "Vue实战教程", price: 99, stock: 200 } </script>子组件（Child.vue）
<template> <div class="child"> <h4>子组件 - 商品展示</h4> <p>商品ID：{{ product.id }}</p> <p>商品名称：{{ product.name }}</p> <p>商品价格：¥{{ product.price }}</p> </div> </template> <script setup> // 接收父组件传递的props，指定类型（增强健壮性） const props = defineProps({ product: { type: Object, required: true, // 必传项 default: () => ({}) // 默认值（防止未传时报错） } }) </script>关键说明：
defineProps是 Vue3 组合式 API 的内置方法，无需导入即可使用；- Props 支持类型校验（String/Number/Object/Array 等），推荐显式声明，便于维护；
- Props 是单向数据流，子组件不能直接修改父组件传递的 props（需通过事件通知父组件修改）。
场景 2：子组件向父组件传递数据 / 触发事件（$emit）
业务场景：子组件的按钮点击、表单提交等操作，需要通知父组件处理（如子组件点击「减库存」按钮，父组件更新库存数据）。
父组件（Parent.vue）
<template> <div class="parent"> <h3>父组件 - 库存：{{ productInfo.stock }}</h3> <!-- 监听子组件触发的reduceStock事件 --> <Child :product="productInfo" @reduce-stock="handleReduceStock" /> </div> </template> <script setup> import Child from './Child.vue' import { ref } from 'vue' // 改用ref声明响应式数据（便于修改） const productInfo = ref({ id: 1001, name: "Vue实战教程", price: 99, stock: 200 }) // 处理子组件触发的减库存事件 const handleReduceStock = (num) => { if (productInfo.value.stock > 0) { productInfo.value.stock -= num } else { alert('库存不足！') } } </script>子组件（Child.vue）
<template> <div class="child"> <h4>子组件 - 操作区</h4> <!-- 点击按钮触发自定义事件，传递参数1 --> <button @click="handleClick">减少1件库存</button> </div> </template> <script setup> // 定义子组件可触发的事件 const emit = defineEmits(['reduce-stock']) // 点击按钮时，向父组件触发事件并传递参数 const handleClick = () => { emit('reduce-stock', 1) // 事件名 + 传递的参数 } </script>关键说明：
defineEmits用于声明子组件可触发的事件，支持数组 / 对象形式（对象可做参数校验）；- 事件名推荐使用
kebab-case（短横线命名），与模板中的监听格式一致； - 子组件可通过
emit传递任意类型的参数（数字、对象、数组等）。
场景 3：父组件调用子组件的方法（ref）
业务场景：父组件点击按钮，触发子组件的内部方法（如子组件的表单重置、数据刷新、弹窗关闭）。
父组件（Parent.vue）
<template> <div class="parent"> <h3>父组件</h3> <button @click="callChildMethod">调用子组件的方法</button> <!-- 给子组件绑定ref标识 --> <Child ref="childRef" /> </div> </template> <script setup> import Child from './Child.vue' import { ref } from 'vue' // 定义ref引用子组件实例 const childRef = ref(null) // 父组件调用子组件方法 const callChildMethod = () => { // 通过ref访问子组件暴露的方法 childRef.value.resetForm() } </script>子组件（Child.vue）
<template> <div class="child"> <h4>子组件 - 表单区域</h4> <input v-model="inputValue" placeholder="请输入内容" /> </div> </template> <script setup> import { ref } from 'vue' const inputValue = ref('') // 子组件的内部方法 const resetForm = () => { inputValue.value = '' alert('子组件表单已重置！') } // 暴露方法给父组件调用（关键） defineExpose({ resetForm }) </script>关键说明：
- 父组件通过
ref绑定子组件，获取子组件实例； - 子组件需通过
defineExpose显式暴露方法 / 数据，父组件才能访问（Vue3 默认隐藏子组件内部属性）； - 适用于「父组件主动控制子组件行为」的场景，避免过度使用（优先用 props/emit）。
场景 4：父子组件双向绑定（自定义 v-model）
业务场景：自定义表单组件（如输入框、开关、下拉框），需要和父组件的数据双向同步（Vue2 的.sync语法在 Vue3 中已整合为 v-model）。
父组件（Parent.vue）
<template> <div class="parent"> <h3>父组件 - 双向绑定值：{{ inputValue }}</h3> <!-- 自定义v-model绑定 --> <Child v-model="inputValue" /> </div> </template> <script setup> import Child from './Child.vue' import { ref } from 'vue' // 父组件双向绑定的数据源 const inputValue = ref('初始值') </script>子组件（Child.vue）
<template> <div class="child"> <h4>子组件 - 自定义输入框</h4> <!-- 输入框值变化时，触发update:modelValue事件 --> <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" /> </div> </template> <script setup> // 接收v-model的默认props（modelValue） const props = defineProps(['modelValue']) // 定义更新事件（update:modelValue是固定命名） const emit = defineEmits(['update:modelValue']) </script>进阶：自定义 v-model 名称如果需要多个双向绑定，可自定义 v-model 的名称：
<!-- 父组件 --> <Child v-model:username="username" v-model:phone="phone" /> <!-- 子组件 --> <script setup> const props = defineProps(['username', 'phone']) const emit = defineEmits(['update:username', 'update:phone']) </script>场景 5：子组件访问父组件（$parent，不推荐）
说明：Vue 官方不推荐直接使用$parent访问父组件（破坏组件封装性），仅作了解，优先用 props/emit。
<!-- 子组件中 --> <script setup> import { getCurrentInstance } from 'vue' // 获取组件实例 const instance = getCurrentInstance() // 访问父组件数据/方法 console.log(instance.parent.proxy.productInfo) </script>总结
- 核心交互规则：父传子用
props（单向数据流），子传父用emit（事件触发），这是 Vue 父子组件通信的最佳实践； - 父调子方法：通过
ref + defineExpose实现，适用于父组件主动控制子组件行为的场景； - 双向绑定：Vue3 通过自定义
v-model（modelValue + update:modelValue）实现，替代 Vue2 的.sync语法； - 避免直接使用
$parent/$children，会降低组件的独立性和可维护性。
