Vue.js 3组合式API中更新父组件值失效问题排查

核心问题原因 #

你遇到的Dialog无法关闭的问题，本质是父组件未正确响应子组件的更新事件，导致父组件的状态值没有同步修改，进而子组件内部的Dialog状态也无法更新。

具体修正步骤 #

1. 修复父组件的双向绑定

父组件当前使用单向绑定:show="abcdef"，子组件触发update:show事件后，父组件的abcdef值不会自动更新。需要改成双向绑定形式：

• 推荐写法（Vue 3 v-model语法糖）：

<template lang="pug">
Button(icon="icon pi pi-plus" @click="abcdef = true")
test(v-model:show="abcdef")
</template>

• 手动绑定写法（等价于上面的语法糖）：

<template lang="pug">
Button(icon="icon pi pi-plus" @click="abcdef = true")
test(:show="abcdef" @update:show="abcdef = $event")
</template>

2. 简化子组件逻辑（可选优化）

你当前子组件用dShow作为中间变量+watch同步props，其实可以直接将Dialog的visible绑定到props的show，省去中间变量，逻辑更清晰：

<template lang="pug">
Dialog(:visible="show" :modal="true" :draggable="false" header="My Dialog" :style="{ width: '50vw' }" @update:visible="emit('update:show', false)")
  p test
  template(#footer)
    Button(label="Test")
</template>

<script setup>
import { defineEmits, defineProps } from 'vue'

const emit = defineEmits(['update:show'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
</script>

为什么之前的代码不生效？ #

当你点击Dialog关闭图标时，子组件确实触发了update:show事件，但父组件没有监听这个事件去修改abcdef的值，导致子组件的props.show仍然是true，watch无法检测到变化，dShow也就不会被改成false，所以Dialog一直显示。

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