为什么需要 Teleport?

以 Dialog 组件为例,通常需要在一个组件中引入 Dialog 组件。然而,有时一部分逻辑属于 Dialog 所在的组件中,从技术角度来看,最好将这一部分移动到根节点之外的位置。

另外一个问题, 当 Dialog 组件使用 position: absolute  相对于它所在的组件进行绝对定位时,样式变得十分混乱。

使用 Teleport

teleport 意为传送,它提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下呈现 HTML。

Step1: 创建传送的目标节点,此处为 index.html 中的和根节点同级的 id 为 model 的节点。

...
<div id="app"></div>
<div id="model"></div>
...

Step2: 使用 <teleport> 将需要被传送的组件包裹起来,   此处将 Dialog 包裹。

<template>
<teleport>
<div>I'am a Dialog.</div>
</teleport>
</template>

Step3:指定 telport 的 to  属性,告诉它要传送到 id 为 model 的节点。

<template>
<teleport to="#modal">
<div>I'am a Dialog.</div>
</teleport>
</template>

接下来无论在哪个组件中使用该 Dialog 组件,都会将它渲染到 id 为 model 的节点下。这就实现了传送的功能。

Component.vue

<template>
<div>
<Dialog></Dialog>
</div>
</template> <script>
import Dialog from "./components/Dialog.vue";
export default {
components: {
Dialog
},
}
</script>

值得注意的是,即使在不同的地方渲染 Dialog,它仍将是 Component.vue 的子级,并将从中接收 props。还可以将多个 teleport 挂在到同一个目标节点上,挂载的顺序是从前到后,即先挂载的位于前面。

Vue3 Teleport的更多相关文章

  1. JELLY技术周刊 Vol.23: Vue3 是伟大航路上的 One Piece 么?

    蒲公英 · JELLY技术周刊 Vol.23 这两天大家应该都被 Vue 发布 3.0 版本的信息刷屏了,背负着很多人的期待, Vue 终于将这个船新版本推到台前,接受大众的检验,那么这个代号为 On ...

  2. Vue3:不常用的Composition API && Fragment、Teleport、Suspense && 与Vue2对比的一些变化

    1 # 一.Vue3不常用的Composition API 2 # 1.shallowReactive与shallowRef 3 .shallowReactive: 只处理对象最外层属性的响应式(浅响 ...

  3. VUE3 之 Teleport - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:宰相肚里能撑船,但凡成功的人,都有一种博大的胸怀. 言归正传,今天我们来聊聊 VUE 中 Teleport 的使用. 2. Teleport 2.1 遮罩效果的实现  < ...

  4. 好消息,vue3.0 进入 beta 阶段!

    昨天,4 月 16 日,vue 3 正式进入 beta 阶段.同日,尤大参加了 State of Vue 的线上活动,以下是他上传到 google docs 上的 slides : State of ...

  5. 尤雨溪在直播中讲到的Vue3.0 Beta的那些特性,快记笔记了

    前言 在那天风雨交加的夜晚,Vue的创作者尤雨溪尤大大在b站直播分享了Vue.js 3.0 Beta最新进展.我对直播的内容进行了一下整理.整整用了三天的空余时间赶上了 1. 全新文档RFCs Vue ...

  6. Vue3.0初体验

    最近看了Vue3.0的相关信息,相比Vue2.0有以下优点: Performance:性能更比Vue 2.0强. Tree shaking support:可以将无用模块"剪辑", ...

  7. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  8. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  9. vue3.0 composition API

    一.Setup函数 1.创建时间:组件创建之前被调用,优先与created被调用,this指向的实例为window,created所指向的实例为proxy 2.this指向:不会指向组件实例 3.参数 ...

随机推荐

  1. 腾讯云大学 x CODING | 知识分享月直播预告

    经历十年的发展,DevOps 已经变成被广泛认知的研发效能方法论.DevOps 工具链作为 DevOps 落地的核心技术实践之一,在自动化和质量方面使得开发团队可以更快更好地交付产品,提高其竞争力. ...

  2. BlockCanary界面卡顿检测

    添加依赖: implementation 'com.github.markzhai:blockcanary-android:1.5.0' 运行后会同时安装检测工具,主要检测UI线程运行卡顿现象 pub ...

  3. Yii2使用数据库操作汇总(增删查改、事务)

    查询 //1.简单查询 $admin=Admin::model()->findAll($condition,$params); $admin=Admin::model()->findAll ...

  4. kube-proxy实现原理

    1.service概念 service是一组pod的服务抽象,相当于一组pod的LB,负责将请求分发给对应的pod.service会为这个LB提供一个IP,一般称为cluster IP.kube-pr ...

  5. 1. Spark Word Count

    1. request: 2. scala: sc.textFile("input").flatMap(_.split(" ")).map((_,1)).redu ...

  6. Spring源码笔记

    Spring Version:5.1.12 ApplicationContext 常用的实例化方式: ClassPathXmlApplicationContext FileSystemXmlAppli ...

  7. php 实现签名验签

    本人php菜鸟,主要使用php实现简单的签名验签功能 以下php代码使用的密钥格式为pem格式,其他证书格式可以使用openssl进行转换(未安装请实现安装): 以下是.p12文件导出pem格式公私钥 ...

  8. java 执行shell命令及日志收集避坑指南

    有时候我们需要调用系统命令执行一些东西,可能是为了方便,也可能是没有办法必须要调用.涉及执行系统命令的东西,则就不能做跨平台了,这和java语言的初衷是相背的. 废话不多说,java如何执行shell ...

  9. Android Studio导入github项目源码步骤

    1.从github上将源码下载下来 2.打开AS,新建一个新项目(我选择了EmptyActivity) 3.先不要在AS 中打开源码,来整理源码 在源码的目录下面,将project下的build.gr ...

  10. JAVA中使用JSONArray和JSONObject

    json 就是一个键对应一个值,简单的一对一关系. JSONObject  json对象,就是一个键对应一个值(键值对),使用的是大括号{ },如:{key:value} JSONArray  jso ...