Vue3中对象类型的@update:modelValue事件无法触发？

问题根源 #

当v-model绑定**原始类型（如数字、字符串）时，每次修改都是替换整个值，会触发update:modelValue事件；但绑定引用类型（如对象）**时，如果直接修改对象内部属性（比如modelValue.name = 'NewName'），只是修改了对象内容，并未替换整个对象的引用，因此不会触发v-model的更新事件，父组件自然收不到通知。

解决方案 #

1. 子组件中替换整个对象（推荐）

遵循v-model设计规范，每次修改对象时创建新对象，通过emit传递给父组件，让ref的引用发生变化，从而触发更新事件：

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

// 修改对象属性的示例方法
const updateUserInfo = (newName, newAge) => {
  // 解构原对象，创建新对象并修改属性
  const updatedUser = {
    ...props.modelValue,
    name: newName,
    age: newAge
  }
  // 触发更新事件
  emit('update:modelValue', updatedUser)
}
</script>

2. 父组件深层监听对象变化

如果需要保留直接修改对象内部属性的逻辑，可以在父组件中用watch开启深层监听，捕获对象内部属性的变化：

<!-- 父组件 -->
<script setup>
import { ref, watch } from 'vue'
const countModel = ref({ name: "Joe", age: 30 })

// 深层监听对象的所有属性变化
watch(countModel, (newUser) => {
  console.log('用户信息已更新:', newUser)
}, { deep: true })
</script>

3. 拆分多个v-model（适合多属性对象）

如果对象包含多个独立属性，可以拆分成多个单独的v-model，每个属性对应一个更新事件，单个属性变化时能精准触发通知：

<!-- 子组件 -->
<script setup>
const props = defineProps({
  name: String,
  age: Number
})
const emit = defineEmits(['update:name', 'update:age'])
</script>

<template>
  <input :value="name" @input="emit('update:name', $event.target.value)" />
  <input type="number" :value="age" @input="emit('update:age', Number($event.target.value))" />
</template>

<!-- 父组件 -->
<ChildComponent 
  v-model:name="countModel.name" 
  v-model:age="countModel.age" 
/>

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