Vue 3子组件正确触发v-model更新需严格匹配父组件绑定方式：接收modelValue（或自定义prop名）并emit'update:modelValue'事件；不可直接修改props，应通过computed(setter)或watch代理；对象类型须全量emit或用useVModel；多v-model需显式声明对应update事件。
在 Vue 3 子组件中正确触发 v-model 更新，关键不是“发个事件就行”，而是要严格匹配父组件的绑定方式，并确保更新动作能真正驱动父组件响应式变量变化。最常出错的地方，是只 emit 了事件，但父组件没用 v-model 语法、或传入的是对象却只改了子字段。
明确 v-model 的展开规则
父组件写
-
:model-value="data"—— 子组件接收 modelValue 这个 prop -
@update:model-value="data = $event"—— 父组件监听 update:modelValue 事件并赋值
也就是说，子组件必须：接收 modelValue prop，并在需要更新时调用 emit('update:modelValue', newValue)。缺一不可。
不要直接修改 props，要用中间层
props 是只读的。如果你直接在子组件里写 props.modelValue.name = '新名字'，父组件完全感知不到——因为没有触发赋值动作，响应式链就断了。
正确做法是用 computed + setter 或 ref + watch 做一层代理：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 用
const localValue = ref(props.modelValue)创建本地副本 - 用
watch(localValue, val => emit('update:modelValue', val))同步回传 - 或者更简洁：用
computed({ get: () => props.modelValue, set: val => emit('update:modelValue', val) })
对象类型要特别小心：改子字段 ≠ 触发更新
如果 modelValue 是一个对象（比如 { name: '张三', age: 25 }），你在子组件里只改 localValue.value.name = '李四'，父组件不会更新——因为 localValue.value 还是同一个引用，emit 没被调用。
解决办法只有两个：
- 每次修改子字段后，手动调用
emit('update:modelValue', { ...localValue.value, name: '李四' }) - 或者用
useVModel封装（推荐）：内部用 Proxy 拦截属性赋值，自动触发完整对象 emit
多个 v-model 要显式声明绑定名
如果父组件用的是
- 要接收
title和content两个 prop - 分别 emit
'update:title'和'update:content' - 对应地，
defineEmits(['update:title', 'update:content'])
否则事件名对不上，父组件收不到更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
