基于element-ui库的el-dialog二次封装弹窗组件

在开发中封装el-dialog为公共组件

• 会出问题的地方就是在于在组件里面把弹窗关闭了，也要同步通知到父组件。
• 这里用.sync修饰符可以很方便的做到。具体看代码了

// 父组件使用
<card-dialog :visible.sync="visible"></card-dialog>
// 使用.sync修饰符，这样就可以监听到该属性变化了，
// 如果不用.sync就需要给组件绑定一个方法去监听变化
// 然后再手动更新组件了
复制代码

// card-dialog组件内部
<template>
  <div>
    <el-dialog 
        title="开卡设置" 
        :visible.sync="openCardDialog">
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
 
  computed: {
    openCardDialog: {
      get() {
        return this.visible
      },
      set(val) {
        console.log(val)
        // openCardDialog改变的时候通知父组件
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
复制代码

原文链接：blog.csdn.net/laishaojian…