el-dialog 组件复用

组件

<!--  dialog组件-->
<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" @close="handleClose">
    <slot></slot>
  </el-dialog>
</template>

<script>

export default {
  props: {
    dialogShow: Boolean,
    title: String,
    width:String
  },
  components: {},
  data() {
    return {
      dialogVisible: this.dialogShow
    };
  },
  computed: {},
  watch: {
    dialogShow(val) {
      console.log('这是 子dialogShow val', val);
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose() {
      console.log('这是点击了关闭',);
      //   this.dialogVisible = false
      this.$emit("handleClose", false)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发 
  activated() { }
}
</script>
<style lang='less' scoped>
.dialog {
}
</style>

导入注册

import Dialog from "@/components/Dialog"

components: {  Dialog },

使用

    <Dialog width="520px" :title="isEdit?'编辑':'添加'" :dialogShow="addDialogShow" @handleClose="handleClose">
     </Dialog>

父组件内

    handleClose(val) {
      console.log('这是 dialog 关闭的 val', val);
      this.addDialogShow = val
    },