Javascript 重构vue单文件组件

随着我的单个文件组件越来越大，我尝试对其进行重构。原来我有几个对话框，使

.vue

文件变得巨大（800行+）。因此，为了保持组件干净，我尝试将对话框转换为专用的子组件（

mydialog

）。我正在使用vuetify（不需要熟悉vuetify）

我在父组件中有一个按钮，用于启用对话框。我将

对话框

道具发送到子组件，然后子组件将连接到对话框的

v型

。问题是，它只在第一次起作用。这是因为当我单击

关闭

按钮时，它会将

对话框

的值更改为

假

，并且由于子组件与父组件失去了通信，它将永远保持

假

。在这种情况下，我如何解决这个问题

以下是片段：

Vue.component（'mydialog'{
道具：{
对话框：{
类型：布尔型，
默认值：false
}
},
模板：`
对话
Lorem ipsum dolor sit amet，
接近
`,
数据：函数（）{
返回{
//对话：错，
}
}
});
新Vue({
el:“#应用程序”，
数据：{
对话框：false
}
});

点击我
您的组件通信有点中断：基本上，您的对话框没有通知应用组件已关闭。以下两个更改启用了modal和app之间的上游通信：

在
app
模板中：

  <mydialog :dialog.sync="dialog"></mydialog>

第一个更改使
app
组件在
mydialog
的
dialog
道具上收听更新

在
mydialog
中，我添加了一个数据属性
dialog$
，它反映了
dialog
props（因为props被认为是常量，不应该更改）。观察者会注意
对话框
更新
对话框$
上的下游更新。当对话框关闭时，
onClose
方法更新
对话框$
，并向订户发送更新（特别是
app
）


Vue.component（'mydialog'{
道具：{
对话框：{
类型：布尔型，
默认值：false
}
},
模板：`
对话
Lorem ipsum dolor sit amet，
接近
`,
数据：函数（）{
返回{
对话框$：false，
};
},
方法：{
onClose（）{
此.dialog$=false；
this.emit（'update:dialog'，this.dialog$）；
},
},
观察：{
对话框：{
立即：是的，
handler（）{
this.dialog$=this.dialog；
},
},
}
});
新Vue({
el:“#应用程序”，
数据：{
对话框：false
},
模板：`
点击我
`,
});

看起来像是的副本。
data: function() {
    return {
      dialog$: false,
    };
  },
  methods: {
    onClose() {
      this.dialog$ = false;
      this.$emit('update:dialog', this.dialog$);
    },
  },
  watch: {
    dialog: {
      immediate: true,
      handler() {
        this.dialog$ = this.dialog;
      },
    },
  }