子组件:
javascript"><template><el-dialogv-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>
父组件:
javascript"> <Son v-model:dialogVisible="dialogVisible"@closeDialog="closeDialog"></Son>
注意:这里一定要加v-model,千万不要漏掉了