在 vue 3 组合式 api 中，子组件通过 `update:xxx` 事件通知父组件更新 prop 值时，若父组件未启用响应式双向绑定（如仅用 `:show="value"`），状态变更将无法同步——需改用 `v-model:show` 语法实现自动监听与赋值。
问题根源在于：你当前在父组件中使用的是单向绑定 <test :show="abcdef">，它只将 abcdef 的当前值传递给子组件，但不会自动监听子组件发出的 update:show 事件并更新 abcdef 的值。因此，尽管子组件正确触发了 emit('update:show', false)，父组件的 abcdef 仍保持 true，导致 Dialog 持续显示。
✅ 正确做法是使用 Vue 3 的 v-model 语法糖（支持自定义修饰符）：
<!-- 父组件 -->
<template lang="pug">
Button(icon="pi pi-plus" @click="abcdef = true")
test(v-model:show="abcdef") <!-- ✅ 启用双向绑定 -->
</template>
<script setup>
import { ref } from 'vue'
import test from './mydialog.vue'
const abcdef = ref(false)
</script>该写法等价于：
<test :show="abcdef" @update:show="val => abcdef.value = val" />
同时，子组件逻辑已基本正确，但可进一步优化以提升健壮性：
立即学习“前端免费学习笔记（深入）”；
<script setup>
import { ref, watch, defineEmits, defineProps } from 'vue'
const emit = defineEmits(['update:show'])
const props = defineProps({
show: { type: Boolean, default: false }
})
// 使用计算属性（推荐）或 watch 同步本地状态；此处 watch 方案可行，但注意：初始值应与 props.show 一致
const dShow = ref(props.show)
// 监听父级 prop 变化（如父组件直接修改了 show）
watch(() => props.show, (newVal) => {
dShow.value = newVal
})
const hide = () => {
emit('update:show', false)
}
</script>⚠️ 注意事项：
- 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 中实现响应式通信的标准实践。
