网站备案主体负责人,做网站用花瓣上的图片会侵权吗,做的最好的视频教学网站,设计素材软件app目录
编辑
1. telePort
2. 异步组件Suspense
3. 总结 1. telePort
telePort 允许你将子组件渲染到 DOM 中的任何位置#xff0c;而不仅仅是在其父组件的范围内。这对于模态框#xff08;modals#xff09;、提示框#xff08;tooltips#xff09;和其他需要脱… 目录
编辑
1. telePort
2. 异步组件Suspense
3. 总结 1. telePort
telePort 允许你将子组件渲染到 DOM 中的任何位置而不仅仅是在其父组件的范围内。这对于模态框modals、提示框tooltips和其他需要脱离当前组件层次结构进行渲染的 UI 元素特别有用。
下面举个例子形象化说明一下。
创建一个包含模态框的子组件
Category.vue
templatedivbutton clickshowModal true显示模态框/button!-- 使用 Teleport 将内容渲染到 body 标签内 --Teleport tobodydiv v-ifshowModal classmodalp这是一个模态框/pbutton clickshowModal false关闭/button/div/Teleport/div
/templatescript setup
import { ref } from vue;const showModal ref(false);
/scriptstyle scoped
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: red;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/style
在父组件中引用。并给父组件设置合适的范围。
Father.vue
templatediv classfatherh2父组件/h2Category //div
/template
script setup
import Category from ./Category.vue;/scriptstyle scoped
.father{width: 220px;height: 200px;background-color: grey;border:1px solid red;
}
/style
如下图所示即使模态框的逻辑和样式都定义在当前组件中它的实际渲染位置是在整个页面的根节点下避免了嵌套层级带来的布局问题。 2. Suspense
suspense 是一个用于处理异步依赖如异步组件的内置组件。它允许你在等待子组件加载时显示一个备用内容fallback content并在子组件准备好后切换到实际的内容。
下面准备一个效果在子组件中进行异步请求在父组件中使用Suspense使子组件在加载时出现 等待中 的内容显示。
子组件Child.vue
templatediv这里是子组件/div/templatescript setup
import axios from axioslet {data:{content}} await axios.get(https://api.uomg.com/api/rand.qinghua)console.log(content)
/scriptstyle scoped/style
父组件Father.vue
templatedivh2这里是父组件/h2Suspensetemplate #defaultChild//templatetemplate #fallbackdiv加载中.../div/template/Suspense/div
/templatescript setup
import { Suspense } from vue;
import Child from ./Child.vue/script
在控制台将网速调至3G减缓请求速度来看效果。 效果如下 3. 总结
Teleport 组件允许你将子组件的内容渲染到 DOM 树中的任意位置如 body 标签内而不局限于其父组件的范围适用于模态框、提示框等需要脱离当前组件层次结构进行渲染的场景
Suspense 组件用于处理异步依赖如异步组件在异步组件加载期间显示备用内容并在组件准备好后切换到实际内容适用于需要动态加载数据或组件的应用场景。
这两者分别解决了组件渲染位置和异步加载状态管理的问题。
更多内容点击下方链接 ↓ ↓ ↓ Vue3入门到实战_借来一夜星光的博客-CSDN博客
