子组件:
<template>
<el-dialog
v-model="visible"
title="Tips"
width="500"
>
<div class="left">
</div>
<div class="right"></div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="close">取消</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { onMounted, ref,computed } from 'vue'
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:dialogVisible'])
onMounted(() => {
console.log('组件执行了');
})
// 备注:这里一定要通过中间变量(代理方式),否则v-model绑定的值会报错
let visible = computed({
get() {
return props.dialogVisible
},
set(value: boolean) {
console.log('value222',value);
emit('update:dialogVisible', value)
}
})
const close = ()=>{
// 请关闭弹框
visible.value = false;
}
const save = () => {
visible.value = false;
}
</script>
父组件:
<Son
v-model:dialogVisible="dialogVisible"
@closeDialog="closeDialog"
></Son>
注意:这里一定要加v-model,千万不要漏掉了