对话

<template>
    <dialog  v-model="visible"></dialog>
</templage>
<script setup>
import { computed } from 'vue'
const prop = defineProps(['visible'])
const emits = defineEmits(['update:visible'])
const visible = computed({
  get() {
    return prop.visible
  },
  set(value) {
    emits('update:visible', value)
  }
})
</script>

字符串

Vue3 SFC Playground
正确使用v-model-使用专用事件更新它。你不能直接改变组件属性-它们是只读的。在您的例子中，我建议将您的名称命名为v-modelvisibility以使其更明确。请参阅Vue的文档：
https://vuejs.org/guide/components/v-model.html
如果你使用一个HTML本地对话框，你应该注意你的prop和call方法在对话框的ref上。
我强烈建议使用原生HTML对话框，因为它有更好的键盘导航和可访问性。
App.vue:

<script setup>

import MyDialog from './MyDialog.vue';
import {ref} from 'vue';
const visible = ref(false);

</script>
<template>
  <button @click="visible=true">Show dialog</button>
  <my-dialog v-model:visible="visible">
    <template #title>My Dialog</template>
    Testing v-model for the dialog's visibility
  </my-dialog>
</template>

字符串
MyDialog.vue

<script setup>

const props = defineProps({visible:Boolean});

import {ref, watch, onMounted} from 'vue';
const $dialog = ref();

onMounted(() => {
    watch(() => props.visible, val => val ? $dialog.value.showModal() : $dialog.value.close(), {immediate:true});
});

</script>
<template>
<dialog @close="$emit('update:visible', false)" ref="$dialog">
    <h2><slot name="title"></slot></h2>
    <p><slot></slot></p>
    <button @click="$dialog.close()">Close</button>
</dialog>
</template>

型

你需要从对话框组件中获取可见的更新，而不是重新发出它，让父组件来处理， prop 不应该直接变化。
组分A：

<template>
  <dialog v-model:visible="visibleProp" />
</template>
<script setup>
const visibleProp = ref(true);
</script>

字符串
对话框：

<template>
  <dialog  :modelValue="visible" @update:modelValue="$emit('update:visible')"></dialog>
</templage>
<script setup>
const prop = defineProps(['visible'])
<script>

型
有关自定义v模型的更多详细信息，请参见https://vuejs.org/guide/components/v-model.html