Vue.js 如何处理元素ui VueJS的对话框组件中的打开事件？

我的VueJS项目中有使用Boostrap 4的工作代码。我在一个表中显示了一个用户列表，每一行都有“Delete”链接。每个用户在该行中都有电子邮件。单击删除时，BS 4模式在模式正文中显示用户的电子邮件。模态有按钮，取消和是。Cancel关闭模式，Yes将对后端进行API调用以删除用户

这是表行中用于调用模式的代码：

<a   href="#" class="" data-toggle="modal" :data-email="user.email"  data-target="#exampleModal">Delete</a> 

这是jQuery，用于处理在安装组件时运行的模式：

安装的（）{

让$this=this
$（'exampleModal'）.on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
var email=button.data（'email'）
var modal=$（此）
modal.find（'.modal body'）.html（'是否确实要删除用户：'+email+'？'））
modal.find（'.modal footer#delete'）。在（'click'，函数（e）{$this.deleteUser（email）}）上
})

如何在中使用对话框组件实现相同的功能

对话框组件记录在此链接中：

对话框组件定义了像open这样的事件，但没有文档说明如何使用它们。所以我不知道

元素ui对话框代码为：

<el-dialog id="eModal"
  title="Delete User"
  :visible.sync="dialogVisible" 

  >
  <span id="modal-body">Dynamic body content</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Yes</el-button>
  </span>
</el-dialog>

动态正文内容
取消
对

单击“删除”列中的按钮时，可以分配所选项目

行模板：

删除

对话框模板：

{{selectedRow.name}
取消
对

这是Vue.js的基本知识。在元素UI示例中，作者在事件中使用内联代码。因为他们假装您已经知道了。您可以在Vue.js上阅读更多内容

<el-dialog id="eModal"
  title="Delete User"
  :visible.sync="dialogVisible" 

  >
  <span id="modal-body">Dynamic body content</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Yes</el-button>
  </span>
</el-dialog>

// component
openDeleteDialog(row) {
  this.selectedRow = row;
  this.dialogVisible = true;
}

deleteCancel() {
  this.dialogVisible = false;
  this.selectedRow = null;
}

deleteOk() {
  // delete action here
  this.dialogVisible = false;
  this.selectedRow = null;
}