我对teleport的理解

teleport有传送的意思，读音【te li po t】[嘻嘻],看官们应该知道读啥子了吧

它可以将你写的代码传送到某一个地方

传送到哪一个地方呢？

传送到你标记的地方，比如说传送到body下，html下

官方说：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，

上面这一句话是说传送到除了app之外的地方。

也就是说不能够传送到app之内。【注意了】

点像哆啦A梦的“任意门”

主要运用在弹窗上，消息提示，这样的场景！

下面我们就来简单使用一下:

我们将弹窗组件移动到body下

场景描述

a-test组件中有b-test组件，b-test组件中有c-mask[弹窗组件]

我们点击按钮，将b-test组件中的组件c-mask[弹窗组件]移动到body下

容器下有a-test组件

<template>

  <div class="box">

    <a-test></a-test>

  </div>

</template>

<script>

import atest from '../components/a-test.vue'

  export default {

    components:{

      'a-test':atest,

    },

  }

</script>

a-test组件下有b-test组件

<template>

  <div class="a-test" >

    我是a-test组件

    <b-test></b-test>

    <div id="testdemo"></div>

  </div>

</template>

<script>

import btest from '../components/b-test.vue'

export default {

  components:{

      'b-test':btest

  },

}

</script>

b-test组件下有c-mask[弹窗组件]组件

<template>

  <div class="b-test">

    我是b-test组件

    <c-mask></c-mask>

  </div>

</template>

<script>

import cmask  from "./c-mask.vue"

export default {

  components:{

      'c-mask':cmask

  },

}

</script>

c-mask[弹窗组件]组件移动到body下

<template>

  <div>

    <a-button type="primary" @click="openHander">open</a-button>

    <!-- 将内容区域的代码移动到body下 -->

    <teleport to='body'>

      <div class="mask" v-if="showFlag">

        <h1>对话框组件</h1>

        <div>

            我是内容哈哈

        </div>

        <a-button  @click="openHander">关闭</a-button>

      </div>

    </teleport>

  </div>

</template>

<script>

import { ref } from '@vue/reactivity'

export default {

    setup () {

        let showFlag=ref(false)

        const openHander=()=>{

            showFlag.value=!showFlag.value

        }

        return {showFlag,openHander}

    }

}

</script>

主要注意的地方

通过上面的小粒子，想必你已经看明白了。

需要注意的是不可以移动到#app之内

我们可以在index.html中创建id=myapp的容器

将它传送在myapp容器下，我们看一下

index.html 创建一个容器

<body>

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

    //等会将会传送到这里哈

    <div id="myapp"></div>

  </body>

传送

<template>

  <div>

    <a-button type="primary" @click="openHander">open</a-button>

    <!-- 将内容区域的代码移动到id=myapp下 -->

    <teleport to='#myapp'>

        <div class="mask" v-if="showFlag">

            <h1>对话框组件</h1>

            <div>

                我是内容哈哈

            </div>

            <a-button  @click="openHander">关闭</a-button>

        </div>

    </teleport>

  </div>

</template>

<script>

import { ref } from '@vue/reactivity'

export default {

  setup () {

    let showFlag=ref(false)

    const openHander=()=>{

        showFlag.value=!showFlag.value

    }

    return {showFlag,openHander}

  }

}

</script>

vue3新特性teleport传送原来这么神奇的更多相关文章

  1. Vue3 新特性

    一.vue3 为什么要重写 两个主要原因考虑重写vue新版本主要功能: 1.主流浏览器对新的JavaScript语言特性的普遍支持. 2.当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题. ...

  2. vue3新特性的使用

    1.Suspense组件:等待异步组件时渲染一些额外内容,让应用有更好的用户体验 例: <template> <div class="app"> <h ...

  3. 尝鲜 vue3.x 新特性 - CompositionAPI

    0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed.watch.r ...

  4. 简单梳理下 Vue3 的新特性

    在 Vue3 测试版刚刚发布的时候,我就学习了下 Composition API,但没想到正式版时隔一年多才出来,看了一下发现还是增加了不少新特性的,在这里我就将它们一一梳理一遍. 本文章只详细阐述 ...

  5. vue3.0新特性以及进阶路线

    Vue3.0新特性/改动 新手学习路线  ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...

  6. 通过10个实例小练习，快速熟练 Vue3.0 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...

  7. Vue3.0新特性

    Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...

  8. JDK1.5/1.6/1.7之新特性总结(转载)

    原文地址:http://www.cnblogs.com/yezhenhan/archive/2011/08/16/2141510.html 如果原作者看到不想让我转载请私信我! 开发过程中接触到了从j ...

  9. JAVA JDK1.5-1.9新特性

    1.51.自动装箱与拆箱:2.枚举(常用来设计单例模式)3.静态导入4.可变参数5.内省 1.61.Web服务元数据2.脚本语言支持3.JTable的排序和过滤4.更简单,更强大的JAX-WS5.轻量 ...

  10. jdk1.6新特性

    1.Web服务元数据 Java 里的Web服务元数据跟微软的方案基本没有语义上的区别,自从JDK5添加了元数据功能(Annotation)之后,SUN几乎重构了整个J2EE体 系, 由于变化很大,干脆 ...

随机推荐

  1. 专注提升用户体验，Superset 1.3发布！

    近期Superset发布了新的版本1.3.0,此版本专注于提升用户体验.并进行了大量的改进与错误修复. 用户体验 此版本的一个主要目标是改进仪表盘原生过滤器.这些过滤器的级别为仪表盘级别,而不是图表级 ...

  2. 火山引擎DataTester：一个爆款游戏产品，是如何用A/B测试打磨出来的？

    随着国内游戏用户数量趋于饱和,中国游戏产业也从高速成长期逐渐转型,市场成熟度提升,竞争趋于精细化. 随着游戏出海以及私域流量运营的挑战,游戏企业对数据分析的使用需求和依赖度进一步提高.而在游戏研发立项 ...

  3. Solon 编译打包怎样保持参数名不变？

    1.Java 项目 Java maven 项目 <plugin> <groupId>org.apache.maven.plugins</groupId> <a ...

  4. 无法停止服务、无法终止 PID 4100 的进程

    服务中无法停止服务. 先查出服务对应的进程 Microsoft Windows [版本 10.0.19043.1348] (c) Microsoft Corporation.保留所有权利. C:\Us ...

  5. 基于C++11特性的线程池

    写在前面:本文学习自基于C++11实现线程池,代码部分均属于该博主,自己只是想记录以下自己的认知,并以这种方式加深一下自己对于多线程的理解 1 前置知识 RAII管理机制 简单来说RAII机制是一种对 ...

  6. Python分析大数据，推荐四款加速器

    在数据科学计算.机器学习.以及深度学习领域,Python 是最受欢迎的语言.Python 在数据科学领域,有非常丰富的包可以选择,numpy.scipy.pandas.scikit-learn.mat ...

  7. Mysql--between

    between 用于where 表达式中,选取介于两个值之间的数据范围,同and一起搭配使用 语法: expr [NOT] BETWEEN begin_expr AND end_expr; 在整个表达 ...

  8. wscat 命令报错

    使用wscat测试连接时报错: [root@kafka kafka-logs]# wscat ws://xxx.xxx.com/bs /usr/lib/node_modules/wscat/node_ ...

  9. HomeBrew 安装 Maven 及其 IDEA 配置

    Brew 安装 Maven brew search maven # 使用搜索工具去搜索maven包 brew info maven #使用info查看maven包当前的信息情况,包括版本依赖描述等 b ...

  10. Python异步编程原理篇之协程的IO

    协程的IO asyncio 作为实现异步编程的库,任务执行中遇到系统IO的时能够自动切换到其他任务.协程使用的IO模型是IO多路复用.在 asyncio 低阶API 一篇中提到过 "以Lin ...