dialog组件的封装

1、新建一个Vue文件
关键点：
① :visible.sync=“dialogVisible”
② props:[‘row’,‘value’]
③ watch监听

<template>
	<div>
		<el-dialog title="提醒详情" :visible.sync="dialogVisible" class="qc-config-dialog">
			<div v-loading="detailLoading">
        		我是Dialog组件
      		</div>
			<div class="textR mt20" style="display: flex;justify-content: end;align-items: end;">
		        <div>
		          <el-button class="btn-primary-cancel" @click="dialogVisible = false">关 闭</el-button>
		        </div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		props:['row','value'],//
		data(){
      return {
        dialogVisible: false,
        detailLoading:false,
        form: {},
        detailData:[],
			}
    },
    created() {
      
    },
    methods: {
      
    },
	watch: {
      value: {
        handler(val) {
          this.dialogVisible = val;
          if (val) {
            this.form = {...this.row};//父组件传来的值
          }
        },
        immediate: true,
      },
      dialogVisible(val) {
        this.$emit("input", val);//关键input
      },
	},
}
</script>
<style scoped lang="scss">
.qc-config-dialog{
  /deep/ .el-form-item {
    margin-bottom: 20px;
  }
}
</style>

2、父组件引入子组件

import DialogDetail from "./DialogDetail.vue"//引入

components: {
  DialogDetail //注册
}

//使用 ①v-if为了每次打开弹窗都会刷新页面接口；②v-model="zkLogDetailDialog"在子组件用value接收；③:row="ListData"传父组件数据；
<DialogDetail v-if="zkLogDetailDialog" v-model="zkLogDetailDialog" :row="ListData"></DialogDetail>