el-dialog踩坑

最近项目中使用el-dialog时遇到一个问题，el-dialog的open事件不起作用。

代码如下：

<el-dialog
  ref="dialog"
  :close-on-click-modal="false"
  class="edit-dialog"
  :class="mtUpdataname === 'CONTRACT' ? 'hetong' : ''"
  v-if="visible"
  :visible.sync="visible"
  @open="open"
  width="80%"
  height="80%"
  :before-close="handleClose"
>
  <div slot="title" class="header-title">
    <span class="title-name">{{ data ? data.title : '提示' }}</span>
    <span class="title-tips">{{ data ? data.tips : '' }}</span>
  </div>
</el-dialog>

问题描述： 在点击打开dialog时open事件的断点没有进去。

问题原因： el-dialog标签上多了一个v-if，去掉v-if后open事件就可以进断点了。

看了element-ui的源码，是在visible为true时emit open事件，如果在标签上再加一个v-if后组件重新渲染了，visible就不起作用了，起作用的是v-if。