1.Fragment —— 片段组件

在Vue2中: 组件必须有一个根标签。
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个内置Fragment虚拟元素中，最后是不参与页面渲染的！
好处: 减少标签层级, 减小内存占用。

<template><fragment>.....</fragment>
</template>

2.Teleport——瞬间移动组件

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

基础语法

<!--to属性的属性值: 是css的选择器 -->
<teleport to="移动位置"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><button @click="isShow = false">关闭弹窗</button></div></div>
</teleport>

使用场景？

复用 Dialog 组件时，html结构会很深层次！编写Dialog 组件样式、定位等css属性就不容易控制！Teleport 瞬移组件可以把藏的深层次的组件的html结构，给它拎出来，放置到指定节点位置元素下，方便css样式的可控性！

src/components/Dialog.vue

<template><div><button @click="isShow = !isShow">点我谈个窗</button><!-- 使用瞬移组件: 将telepor 组件包裹的html结构，瞬移到body节点下  --><teleport to="body"><!-- 遮罩层弹窗是一体的给遮罩层上控制、遮罩层显示顺带着弹窗就出来了; 很多ui组件也是这样控制的 --><!-- v-if= false: 代表直接将dom元素节点直接移除 --><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><h4>我是一下内容</h4><button @click="isShow = !isShow">关闭弹窗</button></div></div></teleport></div>
</template><script>
import { ref } from "vue";
export default {name: "Dialog",// 数据驱动着页面的显示setup() {let isShow = ref(false);return { isShow };},
};
</script><style scoped>
.mask {position: relative;/* 将元素撑开 */top: 0; bottom: 0; left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);
}
.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 300px;height: 300px;background-color: pink;opacity: 0.7;text-align: center;border-radius: 10%;
}
</style>

src/components/Son.vue

<template><div class="son"><h3>我是Son组件!</h3><!-- 使用Dialog组件, 但是Dialog组件的html 不在.son div的结构下，而是瞬移到了body节点下--><Dialog/></div>
</template><script>
import Dialog from './Dialog.vue'
export default {name: "Son",components: {Dialog}
};
</script><style>
.son {background-color: orange;padding: 10px;
}
</style>

3.Suspense——异步组件

Suspense——Vue3中的新组件，并且官方说这个组件目前属于实验阶段！以后与这个组件相关的API，或者说一些写法还有可能改！

Suspense 等待异步组件时渲染一些额外内容，让应用有更好的用户体验。

使用步骤：

1.异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

2.使用Suspense包裹组件，并配置好default 与 fallback

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加载中.....</h3></template></Suspense></div>
</template>

eg：演示案例，异步加载组件

src/App.vue

<template><div class="app"><h1>我是App组件</h1><!-- Suspense: 异步组件1.底层也是用插槽实现的; 2.内部准备好了两个插槽, default展示真实放置的内容、--><Suspense><!-- 放置真正所展示的组件、注意: 指明插槽名是 default, 因为内部是写了两个插槽  --><template v-slot: default><Child></Child></template><!-- 由于某种原因 Child 组件加载慢了！ 就会展示插槽名为 fallback 中的内容信息  --><template v-slot:fallback><h3>加载中,稍等...</h3></template></Suspense></div>
</template><script>
// app、child 组件都属于静态组件
import { defineAsyncComponent } from "vue";
/* 静态引用 解析过程: 只要没有引入 Child 组件成功, 整个App 组件都不进行渲染！ 缺点: 同步执行代码,会造成阻塞渲染页面白屏！
*/
// import Child from "./components/Child";/*动态、异步引入解析过程: 组件异步加载, 不会阻塞进程！缺点: 异步加载成功代码,间接的渲染到页面, 会造成页面的抖动、用户体验效果不好！
*/
const Child = defineAsyncComponent(() => import("./components/Child"));export default {name: "App",components: { Child },setup() {},
};
</script><style>
.app {background-color: gray;padding: 10px;
}
</style>

src/components/Child.vue

<template><div class="child"><h1>我是Child组件!</h1>{{ sum }}</div>
</template><script>
import {ref} from 'vue'
export default {name: "Child",setup() {let sum = ref(0)// 让组件等一等 return new Promise((resolve, reject) =>{setTimeout(()=>{resolve({sum})}, 1000)})}
};
</script><style>
.child {background-color: skyblue;padding: 10px;
}
</style>

Day 18-Vue3 技术_新的组件相关推荐

饿了么ui组件中分页获取当前选中的页码值_【Web技术】314 前端组件设计原则
点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...
技术团队新官上任之中层篇
摘要:对任何企业来说,中层管理人员都是极为关键的,因为中层是执行力的来源.可以说,一家企业有没有希望,只要看一下中层是精明强干,还是松松垮垮就全明白了.其中有哪些必须了解和掌握的知识和道理呢? 恭喜升 ...
人脸脸部识别技术_面部识别技术的危险后果
人脸脸部识别技术揭露 (Disclosure) The following introduction references existing technology and future advanc ...
立可得_第2章_新零售_重构人、货、场
立可得_第2章_新零售_重构人.货.场文章目录立可得_第2章_新零售_重构人.货.场 1.智能售货机需求分析 1.1 概念介绍 1.1.1 新零售 1.1.2 O2O 1.1.3 物联网 1.2 ...
《程序员》 -- 技术团队新官上任之中层篇
自己非常喜欢<程序员>杂志,<程序员>杂志在一定程序上很能开阔我们的视野.因此,一直都想推荐给大家. 方便大家相互学习交流,本文转自<程序员>杂志 http://w ...
关于幂律分布的一个笔记_哈克_新浪博客
关于幂律分布的一个笔记_哈克_新浪博客关于幂律分布的一个笔记 (2011-03-02 18:12:27) 转载▼ 标签: 幂律二八法则杂谈 ...
团队软件库_新环节！新设备！新软件！ ——天津市物流大赛创新大揭秘！
点击蓝字,关注物流研习社 10月25日,由天津市教育委员会主办,天津交通职业学院承办.深圳市中诺思科技股份有限公司.天津开发区畅洋工贸有限公司作为技术支持的天津市职业院校技能大赛(高职组)--智慧物流 ...
单文件组件的组件传值_移动端组件化架构（下）
我的组件化方案对于项目架构来说,一定要建立于业务之上来设计架构.不同的项目业务不同,组件化方案的设计也会不同,应该设计最适合公司业务的架构. 架构设计以我之前公司项目为例,项目是一个地图导航应用, ...
微型计算机硬盘接口主要分为,北京交通大学微机原理与接口技术_期末复习题_图文...
北京交通大学微机原理与接口技术_期末复习题_图文更新时间:2017/1/26 18:34:00 浏览量:1285 手机版 "微机原理与接口技术"2008年期末考试复习题 1. ...

Day 18-Vue3 技术_新的组件

1.Fragment —— 片段组件

2.Teleport——瞬间移动组件

3.Suspense——异步组件

Day 18-Vue3 技术_新的组件相关推荐

最新文章

热门文章