Vue3中v-model实现子组件向父组件传值失效问题排查

API 探路者

2026-8-21

Vue3中v-model子组件向父组件传值失效排查与解决

你的问题核心在于引用类型的prop传递+emit相同对象引用导致v-model未触发更新，再加上父组件在slot中直接修改了原数组对象的属性，使得子组件的emit逻辑冗余且无效。

问题原因分析

父组件直接修改引用类型数据：父组件v-for循环的item是items数组元素的直接引用，你在slot的<select>中用v-model="item.quantity"时，已经直接修改了原数组中对象的quantity属性，此时子组件的itemRef能自动感知到变化（因为是引用类型）。
emit相同对象引用不触发v-model更新：子组件在onUpdated中emit('update:item', itemRef.value)，传递的是同一个对象引用。Vue的v-model对于引用类型的绑定，只有当新值的引用发生变化时才会触发更新，这里传递的对象和父组件items[index]的引用完全一致，所以父组件不会执行更新逻辑，看起来像是emit失效。
普通prop手动监听的特殊性：当用普通prop+手动监听update:item事件时，手动执行items[index] = newItem即使是同一个对象，也会触发组件更新，但v-model的自动处理会跳过相同引用的更新。

解决方案

方案1：移除冗余的emit逻辑（推荐）

既然父组件已经通过slot直接修改了原数组对象的属性，Vue响应式系统会自动同步到子组件，完全不需要子组件再emit事件。

修改子组件，删除onUpdated和emit相关代码：

<template>
  <div data-cy="item" class="item-wrapper">
    <img :src="item.image_url" :alt="item.title" />
    <div class="info-box">
      <h2 class="title">{{ item.title}}</h2>
      <p class="price">Price: <span>{{ item.price }} €</span></p>
      <p class="stock">In stock: <span>{{ item.stock_quantity}}</span></p>
      <p class="quantity">Quantity: <span> {{ item.quantity }}</span></p>
      <slot name="button"></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Book } from '@/composables/useItems'

export default defineComponent({
  name: 'ItemComponent',
  props: {
    item: {
      type: Object as PropType<Book>,
      required: true,
    },
  },
  setup(props) {
    return { item: props.item }
  },
})
</script>

父组件模板无需修改，修改quantity后，子组件会自动更新显示，父数组数据也已同步修改。

方案2：通过子组件封装更新逻辑（适合复杂场景）

如果希望更新逻辑由子组件统一管理，避免父组件直接修改prop，可以：

子组件创建本地响应式副本，暴露更新方法给slot：

<template>
  <div data-cy="item" class="item-wrapper">
    <img :src="localItem.image_url" :alt="localItem.title" />
    <div class="info-box">
      <h2 class="title">{{ localItem.title}}</h2>
      <p class="price">Price: <span>{{ localItem.price }} €</span></p>
      <p class="stock">In stock: <span>{{ localItem.stock_quantity}}</span></p>
      <p class="quantity">Quantity: <span> {{ localItem.quantity }}</span></p>
      <slot name="button" :updateQuantity="updateQuantity"></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive, watch } from 'vue'
import { Book } from '@/composables/useItems'

export default defineComponent({
  name: 'ItemComponent',
  props: {
    item: {
      type: Object as PropType<Book>,
      required: true,
    },
  },
  emits: ['update:item'],
  setup(props, { emit }) {
    // 创建本地响应式副本
    const localItem = reactive({ ...props.item })

    // 同步父组件传来的prop变化
    watch(() => props.item, (newItem) => {
      Object.assign(localItem, newItem)
    }, { deep: true })

    // 定义更新方法，emit新对象确保引用变化
    const updateQuantity = (quantity: number) => {
      localItem.quantity = quantity
      emit('update:item', { ...localItem })
    }

    return { localItem, updateQuantity }
  },
})
</script>

父组件slot中调用子组件暴露的方法：

<Item v-for="(item, index) in items" :key="item.id" v-model:item="items[index]">
  <template v-slot:button="{ updateQuantity }">
    <div class="button">
      <label for="item-select">
        <select @change="updateQuantity(Number($event.target.value))" name="item-select">
          <option v-for="option in options" :key="option.value" :value="option.value">
            {{ option.text }}
          </option>
        </select>
      </label>
    </div>
  </template>
</Item>

方案3：强制emit新对象（不推荐）

如果必须保留子组件的emit逻辑，可以通过深拷贝生成新对象，让父组件v-model感知到变化：

onUpdated(() => {
  // 深拷贝生成新对象传递给父组件
  const newItem = JSON.parse(JSON.stringify(itemRef.value))
  context.emit('update:item', newItem)
})

这种方法会额外消耗性能，且父组件已修改原对象，属于重复操作，仅在特殊场景下使用。

内容的提问来源于stack exchange，提问作者codeDragon