//父组件 father.vue
<template>
<div>
//在这里传输值 加上v-model是为了下面的update能够生效
<son v-model:visible="visible"></son>
</div>
</template>
<script setup>
import son from './son.vue
const visible = ref(false)
</script>
//子组件 son.vue
<template>
<div>
<a-modal
:visible="props.visible"
:footer="null"
title="弹窗"
@ok="handleOk"
@cancel="logModalCalcel"
>
<div class="list">
弹框内容
</div>
</a-modal>
</div>
</template>
<script setup>
import {ref,deifineProps,deinfeEmits} from 'vue'
const visible = ref(false)
const emit = defineEmits()
//defineProps接收父组件传输的值
const Props = defineProps({
visible:{
type:Boolean,
default:false
}
})
const logModalCalcel => () => {
//使用defineEmits向父组件传输值,使用update之后就不用再父组件再写一个专门接收emit传输的值了
emit("update:visible",false)
}
</script>
vue3里面的defineProps和defineEmits
最新推荐文章于 2024-05-20 08:00:00 发布