Vue3使用h渲染函数传值，点击删除后弹窗无法关闭的问题排查

你的代码存在两个核心问题导致弹窗无法正常关闭：

1. props类型不匹配：父组件传递了ref<boolean>对象给子组件的boolean类型props，子组件拿到的是响应式对象而非布尔值，导致弹窗的open状态绑定失效。
2. 违反单向数据流规则：子组件中直接修改props的open值（open = false），Vue不允许直接修改props，这种操作不会生效还会触发控制台警告。

1. 修改子组件（RowAction.vue） #

将props改为支持双向绑定的modelValue，并新增update:modelValue事件用于同步状态，同时移除直接修改props的代码：

<script lang="ts" setup>
defineProps<{
  modelValue: boolean
}>()
defineEmits<{
  (e: 'delete'): void
  (e: 'update:modelValue', value: boolean): void
}>()
</script>

<template>
  <div>
    <button @click="$emit('delete')">delete</button>
  </div>
  <my-alert :open="modelValue">
    <alert-tetx>test</alert-text>
    <button @click="$emit('update:modelValue', false)">close</button>
    <button @click="$emit('delete')">delete</button>
  </my-alert>
</template>

2. 修改父组件（a.ts） #

正确传递布尔值给子组件的modelValue，并绑定update:modelValue事件同步状态，同时确保Data.remove()返回Promise：

const open = ref<boolean>(false)
h(RowAction, {
  modelValue: open.value,
  'onUpdate:modelValue': (value: boolean) => {
    open.value = value
  },
  onDelete: () => {
    Data.remove()
      .then(() => {})
      .catch(() => {})
      .finally(() => {
        open.value = false
      })
  }
})

额外检查点 #

• 确认Data.remove()方法确实返回Promise，否则finally不会执行，需调整该方法使其返回Promise。
• 检查my-alert组件的open属性是否正确接收布尔值，确保弹窗显示/隐藏逻辑正常。

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