Vue中封装el-dialog遇到的坑

一、使用.sync来解决关闭和打开弹框时的父子组件双向绑定的问题

用法：

父组件：在引用子组件的标签上对应的变量加上.sync

   <NewsSubscriptionDialog :isVisible.sync="dialogVisible" ></NewsSubscriptionDialog>

子组件：在关闭的地方绑定点击事件closeDiaglog

  closeDiaglog(){
      this.$emit('update:isVisible',false)
    }

参考文章： 

vue.sync的用法_G018_star sky♬的博客-CSDN博客_vue.sync

二、使用v-if来创建和销毁组件

如果没有v-if，导致关闭再打开的时候页面遗留上次选中的数据，需要在关闭弹框的时候写一堆的代码来清空数据就很繁琐，v-if可以使组件销毁

<NewsSubscriptionDialog :isVisible.sync="dialogVisible" v-if="dialogVisible" ></NewsSubscriptionDialog>