弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误：
vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dislogVisi"

image.png

解决方法
使用自带关闭按钮，给弹窗添加before-close事件（这是elementUI提供的），在这个方法里也是使用$emit修改父组件的visible状态。

子组件

<template>
  <div>
    <el-dialog
      :title="dislogTit"
      :visible.sync="dislogVisi"
      width="30%"
      :before-close="handleClose"
    >
      <slot name="content" />
      <div slot="footer" class="dialog-footer">
        <slot v-if="isSlot" name="footer" />
        <template v-else>
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleAddDepartment">
            确 定
          </el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";

@Component({
  name: "DdDialog"
})
export default class extends Vue {
  @Prop({ default: false, required: true }) dislogVisi!: boolean;
  @Prop({ default: "", required: true }) dislogTit!: string;
  @Prop({ default: false }) isSlot: boolean;
  private addDepartDialogVisi = false;
  @Emit("confirm")
  handleAddDepartment() {}
  @Emit("cancel")
  handleCancel() {}
  @Emit("close")
  handleClose() {}
}
</script>

<style lang="scss" scoped></style>

父组件

<template>

    <dd-dialog
      :dislog-visi="addDepartDialogVisi"
      :dislog-tit="'添加部门'"
      :is-slot="false"
      @confirm="handleAddDepartment"
      @cancel="handleCancelDepartment"
      @close="handleCancelDepartment"
    >
      <template v-slot:content>
        <el-form :model="addDepartForm">
          <el-form-item label="部门名称：" label-width="100px">
            <el-input
              v-model="addDepartForm.name"
              autocomplete="on"
              :clearable="true"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
    </dd-dialog>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import DdDialog from "./components/DdDialog.vue";

@Component({
  name: "OrganizationChart",
  components: {
    DdDialog
  }
})

export default class extends Vue {
  private addDepartForm: any = {};

  private handleCancelDepartment() {
    this.addDepartDialogVisi = false;
  }
}
</script>