vue3学习笔记（10）Teleport 和 Suspense

Vue3专栏入口

一、Teleport（瞬移）基本使用

实现目标：将子组件放到body下
正常来说子组件像红色框内的一样，是在父组件下的，但通过Teleport可以实现将子组件放到body下，如蓝色框内的子组件。

1.1 目录

1.2 App.vue 代码

<template>
	<div>
		<h1>App父组件</h1>
		<hr />
		<Son />
		<hr />
		<!-- 使用teleport包裹 to到指定位置即可实现 -->
		<teleport to="body">
			<Son />
		</teleport>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	import Son from "./components/son.vue";

	export default defineComponent({
		name: "App",
		components: {
			Son,
		},
		setup(props, context) {},
	});
</script>

<style scoped>
</style>

1.3 son.vue 代码

<template>
	<h1>Son 子组件</h1>
</template>

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

	export default defineComponent({
		name: "Son",
		setup(props, context) {},
	});
</script>

<style scoped>
</style>

二、 Suspenses

实现模板未加载出来时，展示一个loding…如下图所示

2.1 目录

2.2 App.vue 代码

<template>
	<div>
		<h1>App父组件</h1>
		<hr />
		<!-- 使用suspense包裹内部两个template -->
		<Suspense>
			<template #default>
				<Son />
			</template>
			<template v-slot:fallback>
				<h1>loding...</h1>
			</template>
		</Suspense>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	import Son from "./components/son.vue";

	export default defineComponent({
		name: "App",
		components: {
			Son,
		},
		setup(props, context) {},
	});
</script>

<style scoped>
</style>

2.3 son.vue 代码

<template>
	<div>
		<h1>Son 子组件</h1>
		<h3>{{ msg }}</h3>
	</div>
</template>

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

	export default defineComponent({
		name: "Son",
		setup(props, context) {
			// 模拟一下2s的数据加载
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve({
						msg: "厉害哦",
					});
				}, 2000);
			});
		},
	});
</script>

<style scoped>
</style>