vuejs2 - Vue-material 对话框：关闭对话框

Question

我正在使用 vue-material Dialog 来显示一个表单，我已经这样做了：

LeftSidenav.vue - 模板：

<md-button class="list-button" id="formBtn" @click="openFormDialog()">
      <md-icon>description</md-icon>
      <span class="sidenav-item-text">{{$t('form_dialog')}}</span>
      <md-tooltip md-delay="100" md-direction="right">{{$t('form_dialog'')}}</md-tooltip>
    </md-button>
    <md-dialog md-open-from="#formBtn" ref="formDialog">
      <md-dialog-title>Title</md-dialog-title>

      <md-dialog-content>
        <form-dialog></form-dialog>
      </md-dialog-content>
</md-dialog>

LeftSidenav.vue - 脚本：

methods: {
  openFormDialog() {
    this.$refs.formDialog.open();
  },
  closeFormDialog() {
    this.$refs.formDialog.close();
  },
},

FormDialog.vue：

<template>
  <div>
    Test
    <div class="buttons">
      <md-button class="md-raised" @click="closeFormDialog">Cancel</md-button>
      <md-button class="md-raised">Submit</md-button>
    </div>
  </div>
</template>

问题出在我的 FormDialog 我不知道如何访问 closeFormDialog 方法，如何通过单击 FormDialog.vue 上的取消按钮来关闭我的对话框？

Answer 1

<el-dialog
  :visible="dialogVisible"
  title="Contact Form View"
  ref="changeUserId"
  :before-close="() => dialogVisible = false"
>
  <contact-form />
</el-dialog>

检查它是否与关闭前的元素 ui 函数相同