vue2如何实现vue3的teleport

目录
  • vue2实现vue3的teleport
  • vue3新特性teleport介绍
    • teleport是什么
    • teleport怎么使用

vue2实现vue3的teleport

不支持同一目标上使用多个teleport（代码通过v-if就能实现）

组件

<script>
    export default {
        name: 'teleport',
        props: {
            /* 移动至哪个标签内，最好使用id */
            to: {
                type: String,
                required: true
            }
        },

        mounted() {
            document.querySelector(this.to).appendChild(this.$el)
        },

        destroyed() {
            document.querySelector(this.to).removeChild(this.$el)
        },

        render() {
            return <div>{this.$scopedSlots.default()}</div>
        }
    }
</script>

使用

<teleport to="#header__left">
    <div>
        当前组件引用{{msg}}
    </div>
</teleport>

vue3新特性teleport介绍

teleport是什么

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

如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。

使用Teleport 就可以方便的解决组件间 css 层级问题

teleport怎么使用

要使用teleport，首先要在页面上添加一个元素，我们要将模态内容移动到该页面

下面举个例子

// index.html
<body>
  ...
  <div id="app"></div><!--Vue mounting element-->
  <div id="modal-wrapper">
    <!--modal should get moved here-->
  </div>
</body>

我们将模态内容包装在 teleport 组件中，还需要指定一个 to 属性，为该属性分配一个查询选择器，以标识目标元素，在本例中为 #modal-wrapper

// App.vue
<template>
  <button @click="toggleModalState">Open modal</button>
  <teleport to="#modal-wrapper">
    <modal v-if="modalOpen">
      <p>Hello, I'm a modal window.</p>
    </modal>
  </teleport>
</template>

teleport 中的任何内容都将渲染在目标元素中

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3 Teleport瞬间移动函数使用方法详解

    vue3 Teleport瞬间移动函数使用方法详解

    vue3 Teleport瞬间移动函数的使用,供大家参考,具体内容如下 Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件" 他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的 以一个例子来看:编写一个弹窗组件 <template> <teleport to="#modal"> <div id="center" v-if="isOpen">

  • 详解Vue3中Teleport的使用

    详解Vue3中Teleport的使用

    在本文中,我们将介绍: Teleport 的目的 Teleport 的例子 一些很有意思的代码交互 Teleport 的目的 首先是什么时候以及使用这个 Teleport 功能. 在开发较大的 Vue 项目时应该以可重用的逻辑去组织代码.但是当处理某些类型的组件(如模式.通知或工具提示)时,模板 HTML 的逻辑可能不会和我们希望渲染元素处于相同的文件中. 实际上在大多数情况下,与 Vue 的 DOM 完全分开处理相比,处理这些元素要容易得多.因为嵌套组件的位置.z-index 和样式等这些东西

  • 详解Vue3 Teleport 的实践及原理

    详解Vue3 Teleport 的实践及原理

    Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport.这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置. 使用场景 业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件.相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题. 话不多说,我们先写一个简单的 Modal 组件. <!-- Modal.vue --> <

  • Vue3内置组件Teleport使用方法详解

    目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染 前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置 场景举例:一个 Button ,点击后呼出模态对话框 这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间 这样就有了一个问题:组件的

  • vue2如何实现vue3的teleport

    目录 vue2实现vue3的teleport vue3新特性teleport介绍 teleport是什么 teleport怎么使用 vue2实现vue3的teleport 不支持同一目标上使用多个teleport(代码通过v-if就能实现) 组件 <script>     export default {         name: 'teleport',         props: {             /* 移动至哪个标签内,最好使用id */             to: {

  • Vue2.x和Vue3.x的双向绑定原理详解

    双向的绑定的原理 通过Object.defineproperty()重新定义对象属性的set方法.get方法来实现的,从这个属性中取值时会触发get方法,改变这个属性时会触发set方法,所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现 当视图上的数据发生改变时, data 中的数据也发生改变当 data 中的数据发生改变时,视图中的数据也发生改变 Object.defineProperty() Object.def

  • 理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

  • Vue2.x与Vue3.x中路由钩子的区别详解

    Vue2.x与Vue3.x中路由钩子的区别详解

    目录 vue2.x 前置概念: 路由钩子分类 路由和组件的概念(方便理解钩子函数) 全局路由钩子 路由配置守卫钩子 组件内的守卫钩子 路由钩子执行顺序 eg: 从A组件跳转到B组件顺序 如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图 区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.befor

  • vue3新增Teleport的问题

    vue3新增Teleport的问题

    目录 vue3新增Teleport vue3 Teleport和插件的认识与了解 一.认识Teleport 二.和组件结合使用 三.多个teleport 四.认识Vue插件 五.插件的编写方式 vue3新增Teleport 在开始介绍Teleport之前先了解一下React的Portals特性. Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案. ReactDOM.createPortal(child, container) 第一个参数(child)是任何可渲染

  • 安装nvm node版本管理器的操作方法(vue2.x迁移vue3.x)

    目录 前言: Mac 安装nvm 解决方案: 前言: vue2.x项目迁移vue3.x,由于node使用版本不同,需要管理不同的node来满足项目需求 首先需要删除本地node/npm 打开你 Finder,按shift+command+G,打开前往文件夹的窗口,分别输入下列目录进去之后删除node和node_modules相关的文件和文件夹: 打开 /usr/local/lib,删除 node 和 node_modules 相关的文件和文件夹 打开 /usr/local/include,删除 

  • Vue2.X和Vue3.0数据响应原理变化的区别

    defineProperty 定义对象的属性,只不过属性里的get和set实现了响应式. 常用: value属性值 get set writeable 是否可写 enumrable 可遍历 Vue从改变一个数据到发生改变的过程  Vue2.X数据响应原理 创建页面,实现延时2s修改对象的值. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LearnVue

  • vue2.x与vue3.x中自定义指令详解(最新推荐)

    目录

  • Vue3对比Vue2的优点总结

    1.为什么要有vue3 我们使用vue2常常会遇到一些体验不太好的地方,比如: 随着功能的增长,需求的增加,复杂组件的代码越来越难以维护,逻辑混乱,虽然vue2也有一些复用的方法,但是都存在一定的弊端,比如我们常常用的Mixin,特别容易发生命名冲突,暴露出来的变量意图不是很明显,重用到其他组件容易冲突. vue2对于typeScript的支持非常有限,没有考虑到ts的集成. vue3的出现就是为了解决vue2的弊端,其composition API很好的解决了逻辑复用的问题,而且vue3源码就

随机推荐