
在 vue 3 组合式 api 中,子组件通过 `update:xxx` 事件通知父组件更新 prop 值时,若父组件未启用响应式双向绑定(如仅用 `:show="value"`),状态变更将无法同步——需改用 `v-model:show` 语法实现自动监听与赋值。
问题根源在于:你当前在父组件中使用的是单向绑定
✅ 正确做法是使用 Vue 3 的 v-model 语法糖(支持自定义修饰符):
Button(icon="pi pi-plus" @click="abcdef = true") test(v-model:show="abcdef")
该写法等价于:
abcdef.value = val" />
同时,子组件逻辑已基本正确,但可进一步优化以提升健壮性:
立即学习“前端免费学习笔记(深入)”;
⚠️ 注意事项:
- v-model:xxx 要求子组件必须声明 xxx prop 并触发 update:xxx 事件,二者名称须严格匹配;
- 若未使用 v-model:xxx,而坚持手动绑定,必须显式书写 @update:xxx 监听器完成赋值;
- dShow 作为本地响应式状态,仅用于控制 Dialog 的 :visible 属性,不参与跨组件状态管理——所有状态源应唯一(即以父组件 abcdef 为单一数据源)。
总结:Vue 3 的 v-model 不再局限于表单元素,而是通用的双向绑定机制。对任意 prop 启用 v-model:propName,即可自动建立“传入值 + 监听更新”的完整闭环,这是组合式 API 中实现响应式通信的标准实践。










