子元件：

<template>   <div class="base-dialog">       <el-dialog         :title="title"         :visible.sync="visible"         :width="width"         :append-to-body="appendToBody"       >           <slot></slot>           <div slot="footer" v-if="isShowFooter">               <el-button @click="visible = false">{{cancel_name}}</el-button>               <el-button                   type="primary"                   @click="confirmBtn"               >{{confirm_name}}</el-button>           </div>       </el-dialog>   </div> </template>
<script>
export default {   name: 'BaseDialog',   props:{     title: { // 標題       type: String,       default: '提示'     },     isShow: { // 彈窗是否展示       type: Boolean,       default: false     },     width:{ //彈窗寬度       type: String,       default: ''     },     cancel_name:{ //取消按鈕名稱       type: String,       default: '取 消'     },     confirm_name:{ //確定按鈕名稱       type: String,       default: '確 定'     },     isShowFooter:{ //是否自定底部       type: Boolean,       default: true     },     appendToBody: { // 是否將自身插入至 body 元素，有巢狀的彈窗時一定要設定       type: Boolean,       default: false     }   },   data() {     return {     };   },   computed: {     visible: {       get(){         return this.isShow       },       set(val){         this.$emit("update:isShow", false)       }     }   },       methods: {     confirmBtn(){ // 觸發儲存       this.$emit('handleSave')     },   },   created() {},   mounted() {}, };
</script> <style scoped lang="scss">   ::v-deep .el-dialog{     .el-dialog__header{       box-shadow: 0px 0px 5px 0px rgba(136, 152, 157, 0.3);       border-radius: 6px 6px 0px 0px;       padding: 20px 20px 18px 25px;       .el-dialog__title{         color: #212121;         font-weight: 16px;       }
    }     .el-dialog__body{         padding-left: 25px;     }   } </style>
父元件：   <template>   <div class="dialog-test">     <el-button type="primary" @click="showDialog">彈窗</el-button>     <base-dialog         :isShow.sync="isShow"         title="測試"         width="703px"         @handleSave="handleSave"     >       <div>我是彈窗</div>     </base-dialog>   </div> </template>
<script> export default {   name: 'DialogTest',   components: {     BaseDialog: ()=> import('@/components/DialogChildren.vue'), // 引入彈窗   },   data(){     return{       isShow: false,     }   },   watch:{     isShow(newValue){ // 監聽彈窗狀態         if(newValue == false){             // 如果需要重置表單在此操作             this.reset()         }     }   },   methods:{     showDialog(){       this.isShow = true     },
    handleSave(){//點選儲存按鈕   console.log('save');     },
    reset(){
    }   } } </script>