封装 element el-dialog 弹框

父组件使用

<template>
  <div>
    <el-dialog 
      :parentDialogVisible.sync="parentDialogVisible" 
    />
  </div>
</template>
 
<script>
import ElDialog from "./ElDialog.vue";
export default {
  components: {
    ElDialog,
  },
  data() {
    return {
      parentDialogVisible: false,
    };
  },
  methods: {},
};
</script>
 
<style scoped lang='scss'>
</style>

子组件封装

<template>
  <div>
    <el-dialog title="弹框" 
      :visible.sync="dialogVisible" @close="hanleClose"
    >
      <div>内容</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ElDialog",
  components: {},
  props: {
    parentDialogVisible: {
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    hanleClose() {
      this.$emit("update:parentDialogVisible", false);
    },
  },
  watch: {
    parentDialogVisible(val) {
      this.dialogVisible = val;
    },
  },
};
</script>