Vue3 新的组件

最新推荐文章于 2024-08-06 13:53:31 发布

AI画手小王

最新推荐文章于 2024-08-06 13:53:31 发布

阅读量495

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53225741/article/details/126439096

版权

Vue3引入了新的组件特性，包括Fragment组件，允许组件无需根标签，减少内存占用；Teleport组件提供将组件HTML结构移动到指定位置的技术，改善布局；Suspense组件则用于在等待异步组件加载时显示额外内容，提升用户体验。通过Suspense，可以先展示一个 fallback 内容，待组件加载完成后再渲染实际内容。

摘要由CSDN通过智能技术生成

fragment组件

在Vue2中：组件必须有一个根标签

在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中好处：减少标签层级，减小内存占用

teleport组件

Teleport 是一种能够将我们的组件 html 结构移动到指定位置的技术

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

我们先做这样一个效果

App.vue

<template><div class="app"><h3>我是App组件</h3><Child/></div>
</template>

<script> import Child from "@/components/Child";

export default {name: 'App',components: {Child}
}