Javascript vue/vuetify模式或最佳实践设计

在我正在开发的应用程序中，我们有很多模态，每个模态都包含少量数据，通常是2-3个字段，有时是复选框、列表等。 问题是当部件关闭时，如何从内部重置/销毁部件。原因有两个： 1不必清除每个模式上的单个数据字段。 当模态第二次打开时，道具上的2个观察者将再次触发，一些模态被编辑，因此被预填充，我宁愿不管理这些数据。 现在，如果模态是从外部关闭的，那么我可以更改组件上的键，这将解决问题，因为模态是从组件内部关闭的，那么我不知道我是否可以这样做，这将是非常好的。 你如何设置情态动词？什么是清洁建筑

示例代码：

<parentComp>
  <customChildModal ref="$customChildModal"></customChildModal>
</parentComp>
// customChildModal
<v-dialog v-model="dialogState">
  <v-text-field v-model="name">
   ...
  </v-text-field>
<v-btn @click="dialogState = false">Cancel</v-btn>
<v-btn @click="saveSomething">Save</v-btn>
...
data(){
   return {
     dialogState: false,
    name: ''
    ...

---

现在在某些情况下，我实际上有很多字段，我需要它们在每次关闭模式时清除。这需要涵盖单击取消的情况，以及用户在我支持的模式或ESC键之外单击的情况

要创建和销毁组件，我认为您必须使用v-if。但不幸的是，由于过渡，使用v-dialog并不容易

第一种解决方案是在父级而不是子级内部使用v-dialog：

家长：

打开对话框 儿童：

不同意 第二种解决方案是在子对象内部使用v-dialog

家长：

打开对话框 儿童：

不同意 { 安装{ this.dialog=true }, 方法：{ 接近{ this.dialog=false setTimeout=>{//这有助于保持转换 这个.$emit'close' }, 150 } } }

---

从不同的角度来看，我认为这两种解决方案都是正确的。但我更喜欢第一种解决方案，因为它占用的空间更小。

要创建和销毁组件，我相信您必须使用v-if。但不幸的是，由于过渡，使用v-dialog并不容易

第一种解决方案是在父级而不是子级内部使用v-dialog：

家长：

打开对话框 儿童：

不同意 第二种解决方案是在子对象内部使用v-dialog

家长：

打开对话框 儿童：

不同意 { 安装{ this.dialog=true }, 方法：{ 接近{ this.dialog=false setTimeout=>{//这有助于保持转换 这个.$emit'close' }, 150 } } }

---

从不同的角度来看，我认为这两种解决方案都是正确的。但我更喜欢第一种解决方案，因为它占用的空间更小。

事实证明，元素重新排序并且不显示以前的状态是正确的，但是如果将它们绑定到数据，则数据将保留，并且仍然需要重置。嗨@Michael我更新了我的答案。我找不到最干净的方法，但这是我最好的解决方案。事实证明，元素被重新排序且不显示以前的状态是正确的，但如果将它们绑定到数据，数据将保留并仍需要重置。嗨@Michael我更新了我的答案。我找不到最干净的方法，但这是我最好的解决方案。