vue3中teleport传送门与emits事件的使用

1.teleportCom组件

<template>
    <teleport to="body">//插入到指定的元素位置
        <div class="main" v-if="isOpen">
            <slot>默认文字显示</slot>
            <button @click="closeModal">关闭传送门</button>
        </div>
    </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props:{
        isOpen:{
            type:Boolean,
            default:false
        }
    },
    emits:["close"],//发送事件
    setup (props,context) {
        const closeModal = () => {
            context.emit("close",{//与emits中对应
                str:"额外参数"
            });
        }
        return {
            closeModal
        }
    }
})
</script>

<style scoped>

</style>

2、App.vue中

<template>
	<div>
		<telepotrCom :isOpen="isOpen" @close="closeModal">
			slot插槽内容
		</telepotrCom>
		<button @click="modalOpen">点击弹出传送门</button>
	</div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import telepotrCom from '@/components/teleportCom.vue';
interface Data {
	count:number;
	newCount:number;
}
export default defineComponent({
	name:"App",
	components:{
		telepotrCom
	},
	setup () {
		const isOpen = ref<boolean>(false);
		const modalOpen = () => {
			isOpen.value = true;
		}
		const closeModal = (params:{str:string}) => {
			console.log(params);
			isOpen.value = false;
		}
		return {
			isOpen,modalOpen,closeModal
		}
	}
})
</script>

<style lang="scss">

</style>