我对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. 6种方法帮你搞定SimpleDateFormat类不是线程安全的问题

    摘要:本文主要讲述在高并发下SimpleDateFormat类为何会出现安全问题,以及如何解决SimpleDateFormat类的安全问题. 本文分享自华为云社区<[高并发]SimpleDate ...

  2. 摆平各类目标检测识别AI应用，有它就够了！

    摘要:在计算机视觉领域,CANN最新开源的通用目标检测与识别样例,通过其强大的可定制.可扩展性,为AI开发者们提供了良好编程选择. 本文分享自华为云社区<摆平各类目标检测识别AI应用,有它就够了 ...

  3. CNCF Serverless工作流社区携手华为云FunctionGraph，开拓Serverless编排新时代

    摘要:华为云以CNCF Serverless Workflow 规范为标准,联合2012实验室华为元戎团队共同打造了华为云FunctionGraph Workflow,为用户提供函数流管理功能,并支持 ...

  4. Scrum Master们，难道每天都在摸鱼？

    摘要:众所周知,Scrum Master是服务型领导--其本身不参与日常的研发工作,写代码.改Bug的工作都让团队干了,Scrum Master到底干了啥?Scrum Master工作的好坏应该如何衡 ...

  5. 性能持续突破！火山引擎ByteHouse上线向量检索能力

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   随着LLM技术应用及落地,数据库需要提高向量分析以及AI支持能力,向量数据库及向量检索等能力"异军突 ...

  6. 将MyBatis Mapper xml 放到 jar 包外面

    在不改程序的情况下,修改 sql 时,需要将 Mapper 中的 XML 文件 放到外面 mybatis:    mapper-locations: classpath:mapper/*.xml #J ...

  7. 不懂前端，我依然开发了一个机器学习APP

    人人都知道学习很重要,学习究竟是为了什么呢?根本目的只有一个,学以致用! 机器学习,大家都学了很多算法,搞了很多模型,但是极少拿来解决实际问题. 毕竟开发一个机器学习应用需要的技术栈不是每个人都能掌握 ...

  8. WCF 动态调用 动态代理

    关键词:WCF动态调用.动态调用WCF.WCF使用动态代理精简代码架构.使用反射执行WCF接口 代码地址: https://gitee.com/s0611163/DynamicWCF https:// ...

  9. 【C++】使用 curl 库配置 HTTP 的 Post/Get 请求响应数据（封装一个简单类）

    2023.7.18 Update: [LibCurl]C++使用libcurl实现HTTP POST和GET 要想使用 LibCURL 库,首先需配置 CURL 库 参考链接:[C++开源库]Wind ...

  10. Python | BitMap算法及其实现

    BitMap概述 本文介绍 BitMap 算法的应用背景,算法思想和相关实现细节. 概括而言,BitMap 主要用来解决海量数据中元素查询,去重.以及排序等问题.这里对海量数据场景的强调,似乎暗示了这 ...