二次封装el-dialog组件

MyDialog.vue

<template>
  <el-dialog
    :visible.sync="mVisible"
    width="438px"
    title="查看详情"
    @open="open"
    @close="close"
  >
    <div >详细内容</div>
    <slot></slot> <!-- 这里还可以插入内容-->
    <div slot="footer">
      <el-button type="primary" @click="close"> 我知道了 </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "MyDialog",
  data() {
    return {
      mVisible: this.visible,
    };
  },
  props: {
    visible: Boolean,
  },
  watch: {
    visible(val) {
      this.mVisible = val;
      if (val) {
        this.getData();
      }
    },
    mVisible(val) {
      this.$emit("update:visible", val);
    },
  },
  methods: {
    open() {
      console.log("open");
      this.$emit("open");
    },
    close() {
      console.log("close");
      this.$emit("close");
    },
    getData() {
     // 获取详情数据
    },
  },
};
</script>

父组件中引入和使用

<template>
    <MyDialog
      :visible="myDialogVisible"
      @close="myDialogVisible = false"
    >
      <div>插入的内容</div>
    </MyDialog>
<template>

<script>
import MyDialog from "./MyDialog.vue";
export default {
  name: "Parent",
  data() {
    return {
      myDialogVisible: false,
    };
  },
  components: {
    MyDialog
  },
};
</script>

或者注册成全局组件

import MyDialog from "./MyDialog.vue";
Vue.component('MyDialog',MyDialog)

全局注册后，父组件中就不用再import了，可以直接使用

<template>
    <MyDialog
      :visible="myDialogVisible"
      @close="myDialogVisible = false"
    >
      <div>插入的内容</div>
    </MyDialog>
<template>

<script>
export default {
  name: "Parent",
  data() {
    return {
      myDialogVisible: false,
    };
  },
};
</script>