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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<!-- 父组件 -->
<Child v-model:username="username" v-model:phone="phone" />

<!-- 子组件 -->
<script setup>
const props = defineProps(['username', 'phone'])
const emit = defineEmits(['update:username', 'update:phone'])
</script>

<!-- 子组件中 -->
<script setup>
import { getCurrentInstance } from 'vue'

// 获取组件实例
const instance = getCurrentInstance()
// 访问父组件数据/方法
console.log(instance.parent.proxy.productInfo)
</script>