Vue3 的“空投”Teleport的使用

前言:Teleport是一个内置的组件,可以将一个组件内部的一部分"传送"到该组件的DOM结构外层的位置去

使用场景:

  1. 全屏模态框
  2. 在已经布局好的页面上,进入到特定页面,需要在布局组件上渲染特定的内容
  3. 预览模式下,将内容展示在页面不同的地方

以上就是我在项目中使用的场景,更详细可前往官网查看

会遇到什么问题呢?

js 复制代码
[Vue warn]: Failed to locate Teleport target with selector "#teleport-header-left". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree. 
js 复制代码
[Vue warn]: Invalid Teleport target on mount: null (object) 

大概就是需要空投的节点'#teleport-header-left',还没渲染,或不存在,Teleport就已经开始投送了。

解决的办法:

引入defineAsyncComponent,将含有Teleport的文件懒加载。

js 复制代码
import { defineAsyncComponent } from "vue";

const TeleportCom = definAsyncComponent(() => import('....'));

同一个组件内由上到下渲染,只要to的目标渲染了,就可以挂到对应的节点上。

还可以结合v-bind进行动态渲染到某个节点上去

js 复制代码
<Teleport :to="targetRef">
    <div>把我挂载<div>
</Teleport>

//js
const props = defineProps({
    targetRef: {
        type: String,
        default: 'body',
    }
})

禁用Teleport,场景:客户端需要空投,移动端不需要。

js 复制代码
<Teleport :disabled="isMobile">
  ...
</Teleport>

多个Teleport共享目标,挂载到同一个id上,那么会有先后顺序,也就是追加在后面渲染

js 复制代码
<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>
相关推荐
jiangzhihao05151 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI3 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front4 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie4 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀5 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻5 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树5 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔5 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04126 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj506 小时前
前端基础之《React(1)—webpack简介》
前端·react