Vue3 Teleport的使用

Teleport相当于一个传送门,把写好的组件传送到某个父元素

//teleport 子组件
<template>
	  <teleport :to="props.childrenId">//支持id  类型   这里的传送门只作用于第一个
		  <div >
		  	我是{{props.childrenId}}的子集
		  </div>
	  
	  </teleport>
	  
</template>

<script setup>
	let props=defineProps({
		childrenId:{
			type:String
		}
	})
	console.log(props.childrenId)
</script>
//父组件
<template>
	<div class="Teleport">  
		123
	</div>
	<div class="Teleport">
		123
	</div>
	<Teleports childrenId=".Teleport"></Teleports>

</template>

<script setup> 
import Teleports from '@/components/Teleport.vue';