梗概:

在组件模板中使用<teleport>标签包围的标签,

可以指定插入到组件外面的哪个标签之下
在外部调用该组件的时候, 组件内的标签将会插入到外面的指定html之下

注意:

逻辑关系并没有改变
1. 传送出去的标签依然可以使用组件中的数据

实例:

app应用下的test组件:

<template>
	<teleport to="body"><!-- css选择器语法-->
		<h1>hello!</h1>
	</teleport>
</template>

调用组件:

<body>
	<div id='app'>
		<test/>
	</div>
</body>

渲染结果:

<body>
	<div id='app'></div>
	<h1>hello!</h1>
</body>

1. 禁用teleport标签:

禁用之后, 会自动省略<template>标签

<script setup>
let unTeleport = true;
</script>
<template>
	<teleport to="body" :disabled="unTeleport">
		<h1>hello!</h1>
	</teleport>
</template>