vue2项目，封装的第一版弹框组件使用基于elment-ui
在vue同级创建components/dialog文件夹
里面放paramDialog.vue

父组件引入 dialogVisible要是改变量名，这个也记得改

<ParamDialog :title="title" :dialogVisible.sync="dialogVisible" @dialog-closed="handleDialogClosed" :dataRe="dataFa" />import ParamDialog from './components/dialog/paramDialog.vue';components: {ParamDialog},
data() {return {// 弹出框dialogVisible: false,//要传给弹框的数据下面3个dataFa: null,title: '参数模板'}
},
methods: {handleView(row) {   //可以是修改也可以是新增console.log('打开dialog');this.dialogVisible = true;//下面看着传this.dataFa = row;this.dataFa = { ...this.dataFa, time: this.queryParams.time, };},//关闭弹框,子传父的自定义事件监听handleDialogClosed(closed) {this.dialogVisible = false;// 在这里处理关闭状态console.log('子组件弹框关闭状态:', closed);},
}

子组件

<!--参数模板弹框-->
<template><el-dialog :title="title" :data="list" width="50%" :visible.sync="dialogVisible" :before-close="handleClose"><div>1</div></el-dialog>
</template><script>
export default {props: {dialogVisible: {type: Boolean,default: false},dataRe: {type: Object,default: {}},title: {type: String}},data() {return {queryParams: {pageNo: 1,pageSize: 15,time: '',deviceCode: '',stationId: null,type: null},// 遮罩层loading: true,// 表格list: []};},watch: {dialogVisible(newValue) {if (newValue) {//说明是打开的,调用方法this.init();}}},computed: {},methods: {//关闭弹框handleClose() {this.$emit('dialog-closed', this.dialogVisible);},init() {this.loading = true;//处理父组件传过来的对象this.queryParams.time = this.dataRe.time;this.queryParams.stationId = this.dataRe.stationId;this.queryParams.deviceCode = this.dataRe.deviceCode;this.queryParams.type = this.dataRe.type;var stationNameC = this.dataRe.stationName;var timeC = this.dataRe.time;this.loading = true;console.log('🚀 ~ getList ~ this.queryParams:', this.queryParams);this.loading = false;}}
};
</script>
<style lang="scss" >
</style>