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>