-
Vue3.0种中新增的teleport和suspence标签
teleport标签
我们通过vue创建的项目，最终的html文件，只会有aap那个div标签，所有组件都是基于这个div显示。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。
这个标签可以指定将标签内的元素添加到指定位置。
用法：
css选择器"> //想要添加的内容
比如在index.html中，app那个div外添加元素节点，我们先手动创建一个app2的div。
App.vue代码：指定向app2添加内容
- <teleport to='#app2'>//通过选择器的方式获取
- <p>尝试获取数据-----{{a}}p>
- <div>我是新创建的一个节点，指定到app2内div>
- teleport>
页面情况，和代码结构：
可以看到在teleport中是可以获取setup中的数据的，我们想要添加的内容也到了app2这个div的内部。
注意：这里teleport属性to指向选定的目标，也可以通过document.body的方式，即既可以用css获取元素的方法，也可以用js获取节点的方法。
suspence标签
这个标签的用途是对异步组件加载时的一种效果优化，其实在vue2.0的时候，高级异步加载组件也可以实现这个效果，但是有点复杂就没有什么人用。
高级异步组件：
const AsyncComponent = () => ({
// 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})因此vue3.0提出了suspence这个标签，来替代效果。
用法：在suspence内写两个template标签，即就是像具名插槽传数据一样。
如：
正在加载中Loading...
fallback这个插槽的内容为组件异步加载过程中显示的内容，default这个为组件MyChild异步加载成功时显示的内容。
我们在template模板中，写上上述代码后，需要在setup钩子环境中导入这个MyChild组件，
代码：
-
相关阅读:
Fiddler的安装和使用
你们分库分表使用什么中间件，有什么优点和缺点？
21.Hadoop在Windows环境下的下载安装配置超详细版
[Docker]三.Docker 部署nginx,以及映射端口,挂载数据卷
lightdb22.3-oracle 内置包兼容增强
每个 Flutter 开发者都应该知道的一些原则
WPS EXCEL 筛选指定长度的文本 内容 字符串
UltraISO做u盘镜像启动盘
Rust机器学习之Linfa
泛型与反射，看这篇就够了
- 原文地址：https://blog.csdn.net/m0_59345890/article/details/126977337