如何在 Vue Material md-dialog 上捕获属性更新？

Question

我有一个包含一个子组件的父组件，该子组件又包含一个md-dialog 组件。我用这个从组件打开对话框：

ParentComponent.vue

<template>
  <div>
    <ConfirmDialog
      :dialogState="isDialogShown"
      @closeDialog="value => isDialogShown = false"
    />
   <button @click="handleOpenModal()">open modal</button>
  </div>
</template>
<script>
export default {
  name: 'ParentComponent', 
  data() {
    return { isDialogShown: false }
  },
  methods: {
    handleOpenModal() {
      this.isDialogShown = true;
    }
  }
}
</script>

按钮单击打开此对话框：

ConfirmDialog.vue

<template>
  <md-dialog :md-active.sync="localDialogState">
    markup
  </md-dialog>
</template>
<script>
export default {
  name: "ConfirmDialog",
  props: ["dialogState"],
  computed: {
    localDialogState: {
      get() {
        return this.$props.dialogState;
      },
      set() {
        this.handleCloseDialog();
      }
    }
  },
  methods: {
    handleCloseDialog() {
      this.$emit("closeDialog");
    }
  }
};
</script>

我不太喜欢这个，因为它使用这个localDialogState 的setter 来执行这个副作用，它最终只会在设置父属性后返回到设置localDialogState，但是到目前为止我'必须使用设置器，以便我可以捕获背景点击或 ESC 按键等事件，这些事件意味着 close the modal。

注意，我不得不使用这个“本地”版本的对话框状态，因为显然 props 和 computed 道具都只保留在这个对象的实例上，所以名称会发生​​冲突。可能还有更好的方法可以做到这一点，我愿意听取建议，因为以上是我写过的第一行 Vue。

更新这些 (.sync'd) 道具以捕获由 md-mialog 触发的关闭事件的规范方法是什么？

Answer 1

很明显，一个对话框不能只被一个布尔属性使用。这样一来，您就无法区分何时取消对话以及何时确认对话。在更复杂的情况下，您可能有多个具有不同操作的 confirm 按钮。

我建议使用open 之类的方法通过在父组件中使用 $refs 打开一个对话框，并在其内部关闭一个对话框并发出可以在父组件中捕获的确认事件.