我对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. CWE发布2021年最危险的25种软件缺陷

    摘要:CWE最危险的25种软件缺陷,是NVD过去两年中遇到的最常见和影响最大的问题指示性的列表. CWE Top25 可以帮助开发人员.测试人员和用户,以及项目经理.安全研究人员和教育工作者深入了解最 ...

  2. 治理效率提升77%！揭秘基于DataLeap实时健康分的最佳实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景 某企业实时数仓团队通过数据收集.整合.计算和存储构建实时数据仓库,为企业提供快速.准确.可靠的实时数据分析和 ...

  3. 火山引擎DataLeap如何解决SLA治理难题（三）： 平台架构与未来展望

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 平台架构总结 火山引擎 DataLeap SLA平台整体主要分为基础组件.规划式治理服务.响应式治理服务三大块,系 ...

  4. 创建一个科学决策必备的A/B实验，都需要哪些准备？——火山引擎 DataTester 使用指南

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流 DataTester 是火山引擎数智平台旗下产品,能基于先进的底层算法,提供科学分流能力和智能的统计引擎,支持多种复 ...

  5. MySQL 创建存储过程注意项

    MySQL server version for the  right syntax to use near 'IF' MySQL server version for the right synta ...

  6. Intellij idea getter setter 模板设置

    通过getter setter 模板设置 在实体类中 自动添加 @XmlTransient  按 [Alt+Insert],弹出的提示中选择 Getter and Setter Xml Entity ...

  7. 聊聊损失函数1. 噪声鲁棒损失函数简析 & 代码实现

    今天来聊聊非常规的损失函数.在常用的分类交叉熵,以及回归均方误差之外,针对训练样本可能存在的数据长尾,标签噪声,数据不均衡等问题,我们来聊聊适用不同场景有针对性的损失函数.第一章我们介绍,当标注标签存 ...

  8. 一个神奇的Python库：Evidently，机器学习必备

    Evidently 是一个面向数据科学家和机器学习工程师的开源 Python 库.它有助于评估.测试和监控从验证到生产的数据和 ML 模型.它适用于表格.文本数据和嵌入. 简介 Evidently 是 ...

  9. 【JAVA基础】Session使用

    Session使用 用户注册 详见: https://blog.csdn.net/maxiangyu_/article/details/124088948 BaseController package ...

  10. 将应用程序注册为Linux系统服务，并设置开机自启动

    1.新建服务文件 vim /usr/lib/systemd/system/statagent.service 其中statagent是自定义的服务名称 2.文件内容 [Unit] Descriptio ...