-
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组件，
代码：
-
相关阅读:
基于JAVA旅游网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署
考研算法47天：01背包
如何获取GC(垃圾回收器)的STW(暂停)时间?
适用于嵌入式单片机的差分升级通用库+详细教程
【MyBatis-Plus】DML
《深度学习进阶：自然语言处理》读书笔记：第7章 基于RNN生成文本
日料西餐厅餐品预约小程序的作用是什么
操作系统 一个进程通过内核事件 来控制另一个线程的结束
如何使用BERT生成单词嵌入？
关于Chrome DevTool
- 原文地址：https://blog.csdn.net/m0_59345890/article/details/126977337