我对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. MRS离线数据分析：通过Flink作业处理OBS数据

    摘要:MRS支持在大数据存储容量大.计算资源需要弹性扩展的场景下,用户将数据存储在OBS服务中,使用MRS集群仅做数据计算处理的存算分离模式. 本文分享自华为云社区<[云小课]EI第47课 MR ...

  2. 直播预告 | 企业如何轻松完成数据治理？火山引擎 DataLeap 给你一份实战攻略！

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 企业数字化转型正席卷全球,这不仅是趋势所在,也是企业发展必然面对的考题,也是企业最关心.最难决策的难题,数字化不仅 ...

  3. 无法获得数据库 'model' 上的排他锁。请稍后重试该操作

    标题: Microsoft SQL Server Management Studio 数据库 "XXXX" 的 创建 失败. (Microsoft.SqlServer.Smo) 有 ...

  4. 为什么 Go 和 Rust 语言都舍弃了继承？

    为什么go和rust语言都舍弃了继承? 舍弃了 Class 舍弃或弱化子类型 类的继承是一段儿弯路 OO 发明了继承,然后发现真正有意义的是 interface 的组合(更准确的说,是 Product ...

  5. OJ中的语言选项里G++ 与 C++的区别

    概念上: C++是一门计算机编程语言,而G++则是C++的编译器. GCC和G++都是GUN的编译器,cc是Unix系统的C Compiler,而gcc则是GNU Compiler Collectio ...

  6. Codeforces Round #725 (Div. 3) A~G 题解记录

    补题链接:Here 1538A. Stone Game 数组 \(a\) 的大小为 \(n\) ,请问每次可以删除最左和最右侧的元素,请问最少执行多少次能删除掉数组中的最大值和最小值 (\(1\le ...

  7. 2021年vivo互联网技术最受欢迎文章TOP25

    岁月流转,时光飞逝,转眼2021年已经画上句号.过去一年,vivo 互联网技术共推送了107篇文章,涉及服务器.前端.数据库等技术. 今天小编就带大家回顾一下2021年我们最受欢迎的25篇文章(根据阅 ...

  8. Sentinel 是如何做限流的

    限流是保障服务高可用的方式之一,尤其是在微服务架构中,对接口或资源进行限流可以有效地保障服务的可用性和稳定性. 之前的项目中使用的限流措施主要是Guava的RateLimiter.RateLimite ...

  9. 我的2023年度关键词：ChatGPT、生产力工具

    2023 是 AI 大爆发的一年,这一年我在我的生产力工具中(一个叫 lowcode 的 vscode 插件)接入了 ChatGPT API,插件也进行了重构,日常搬砖也因为 ChatGPT 的引入发 ...

  10. mybatis-plus Date类型的参数 只有年月日 没有时分秒的解决办法

    问题: 使用mybatis-plus 设计实体的时候 使用   Date inTime;   数据库里的时间2021-11-05 22:00:13 但java里的时间变成了2021-11-05 00: ...