Vue 中父子组件之间最常用的业务交互场景

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>

---

总结

1. 核心交互规则 ：父传子用props（单向数据流），子传父用emit（事件触发），这是 Vue 父子组件通信的最佳实践；
2. 父调子方法 ：通过ref + defineExpose实现，适用于父组件主动控制子组件行为的场景；
3. 双向绑定 ：Vue3 通过自定义v-model（modelValue + update:modelValue）实现，替代 Vue2 的.sync语法；
4. 避免直接使用$parent/$children，会降低组件的独立性和可维护性。