vue3 对话框关闭清空数据

如果你是使用 Vue3 的 Composition API 来编写对话框组件的话，可以考虑在对话框关闭时，手动清空组件内部的数据。可以使用 `ref` 或 `reactive` 来创建数据对象，并在对话框关闭时将其重置为初始值。例如：

<template>
  <div>
    <button @click="showDialog = true">打开对话框</button>

    <dialog v-model="showDialog">
      <input v-model="inputValue" type="text">
      <button @click="closeDialog">关闭对话框</button>
    </dialog>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const showDialog = ref(false)
    const inputValue = ref('')

    const closeDialog = () => {
      // 关闭对话框时重置数据
      inputValue.value = ''
      showDialog.value = false
    }

    return {
      showDialog,
      inputValue,
      closeDialog
    }
  }
}
</script>

以上代码中，我们使用 `ref` 来创建了两个数据对象 `showDialog` 和 `inputValue`，分别表示对话框是否显示和输入框的值。在 `closeDialog` 方法中，我们将其重置为初始值。这样，每次打开对话框时，数据都是空的，可以避免出现数据重复或污染的问题。