vue3 Teleport

vue3 Teleport

使用场景

当组件模板的一部分逻辑属于该组件，但是技术上这一部分需要放到其他地方。
最典型的使用场景就是模态框

基础使用

字面意思：远距离传送

vue3中的作用就是将teleport标签下的元素传送到指定位置

如下示例将Test1中的teleport下的span传送到Test2的.aa元素下

// App.vue
<template>
	<test2/>
	<test1 msg="Hello,Teleport"></test1>
</template>

<script>
	import Test1 from './components/Test1'
	import Test2 from './components/Test2'

	export default {
		components: {
			Test2,
			Test1
		}
	}
</script>

// Test1.vue
<template>
	<div>
		<teleport to=".aa">
			<span>{{msg}}</span>
		</teleport>
	</div>
</template>

<script>
	export default {
		props: {
			msg: String
		}
	}
</script>

// Test2.vue
<template>
	<div>test2：
		<span class="aa"></span>
	</div>
</template>

<script>
	export default {}
</script>

异常处理 -Failed to locate Teleport target with selector “.aa”. Note the target element must exist before the component is mounted

意思是Teleport参数to指向的目标元素必须在teleport标签所在组件挂载之前已存在

解决办法：目标元素不能是teleport标签所在组件的父组件或子组件