在点击打开dialog时open事件的断点没有进去

问题描述：
在点击打开dialog时open事件的断点没有进去。
问题原因：
el-dialog标签上多了一个v-if，去掉v-if后open事件就可以进断点了。
看了element-ui的源码，是在visible为true时emit open事件，如果在标签上再加一个v-if后组件重新渲染了，visible就不起作用了，起作用的是v-if。

参考链接：https://juejin.cn/post/6971225093217189901

总结写法

写法很多，这里只简单记录部分

写法1：

Dialog

• dialog用sync的prop
• this.$emit("update:visible", false) or this.dialogVisible=false;来触发关闭
• @open="onOpen"来进入
• destroy-on-close 关闭时销毁dialog中的元素
• :close-on-click-modal="false" 设置不通过esc关闭

<el-dialog
 title="扫描新设备配置"
 :visible.sync="dialogVisible"
 destroy-on-close
 :close-on-click-modal="false"
>
@PropSync("visible") dialogVisible!: boolean;

父组件

• 用.sync同步变量

<batch-activate-config-dialog :visible.sync="activateVisible" />

  private activateVisible: boolean = false;

handleBatchActive() {
 this.activateVisible = true;
}

 

写法2 区别主要在父组件调用时
dialog中

• isDialogShow为data(){}中的自有变量
• this.isDialogShow = false;关闭
• open回调中事件处理

父组件
打开调用时this.$refs.warnImageDialog.isDialogShow = true;

写法3 
v-if + mounted 此时open回调失效