`一.Teleport的介绍`

Teleport是Vue 3.0 新增的一个内置组件，主要是为了解决一些特殊场景下模态对话框组件、组件的渲染。

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

如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用 Teleport 就可以方便的解决组件间 css 层级问题。

`二.`Teleport用法

用法非常简单，只需要使用 to 这个属性就可以把组件渲染到想要的位置

// 渲染到body标签下

<teleport to="body">

  <div class="modal">

    I'm a teleported modal!

  </div>

</teleport>

也可以使用

<teleport to="#some-id" />

<teleport to=".some-class" />

<teleport to="[data-teleport]" />

必须是有效的查询选择器或 HTMLElement。

`三.`场景使用

在一些场景中，比如使用modal时，我们想要将modal放在具体的vue页面中，功能与位置保持一致。但是在展示时，又希望直接将它放在body下，方便实现定位样式。面对功能位置与样式位置的不统一，vue3中提供一对<teleport ></teleport>标签用于移动dom的位置到指定元素。

下面情况是没加teleport的时候

teleport to="body"的情况

代码如下：

<template><div class="home"><h3>Tooltips with Vue 3 Teleport 是父页面</h3><button @click="openDialog">打开弹窗 </button><modal :title="title" :isShow="isShow" @close="openDialog">这是一段内容!!!</modal></div>
</template><script>
import {ref} from 'vue'
import modal from './modal.vue'
export default {components: {modal},setup(){let title = ref('模态框');let isShow= ref(false);const openDialog = (res)=>{isShow.value = typeof res=='boolean'? false:true;}return {title,isShow,openDialog}}
};
</script>子组件moadl
<template><teleport to="body"><transition name="dialog-fade"><div class="dialog-wrapper" v-show="isShow"><div class="dialog"><div class="dialog-header"><slot name="title"><span class="dialog-title">{{ title }}</span></slot></div><div class="dialog-body"><slot></slot></div><div class="dialog-footer"><slot name="footer"><button @click="onClose">关闭</button></slot></div></div></div></transition></teleport>
</template><script>
export default {props:{title:{type:String,default:''},isShow:{type:Boolean,default:false}},emits:['close'],setup(props,ctx){const onClose = () => {ctx.emit('close',!props.isShow);};return {onClose}}
};</script>
<style scoped>
.dialog-wrapper {position: fixed;top: 0;right: 0;bottom: 0;left: 0;height: 100%;background-color: #00000080;overflow: auto;display: flex;justify-content: center;align-items: center;}.dialog-wrapper>.dialog {width: 40%;background-color: #fff;border-radius: 2px;box-shadow: #0000004d 0 1px 3px;color: #303133;
}
.dialog>.dialog-header {font-size: 18px;line-height: 1.4;padding: 20px 20px 10px;
}
.dialog>.dialog-body {line-height: 1.4;padding: 30px 20px;
}
.dialog>.dialog-footer {line-height: 1.4;padding: 20px 20px 10px;display: flex;justify-content: flex-end;
}
</style>

Vue3内置组件Teleport相关推荐

Vue3内置组件teleport详解
teleport的作用该组件可以将指定内容渲染到特定容器中,而不受 DOM 层级的限制应用场景当蒙层内容在一个组件中时,蒙层内容是无法遮挡住全部内容的,因此,需要使用teleport将蒙层内容渲 ...
Vue3中内置组件 Teleport 详解
1. 基本概念 1.1 简单理解不管是 Vue2 还是 Vue3 中都有内置组件的存在,如 component 内置组件.transition 内置组件等等.内置组件就是官方给我们封装的全局组件,我 ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
vue3内置组件（Teleport组件，Fragment组件）-传送组件，减少层级
一.传送组件(Teleport组件) 可将组件移动到 DOM 中 Vue app 之外的其他位置,主要是为了解决一些特殊场景下模态对话框组件.组件的渲染. 例子:模拟UI框架对话框组件. App.vu ...
Vue3 新特性内置组件＜Teleport＞
任意传送门--Teleport Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新: Vue3 还新增了一个内置组件:Teleport.这个组件 ...
VUE内置组件 vue使用插槽分发内容组件缓存实现动画的过渡效果
动态组件除了允许用户自定义组件之外,Vue还内置了一些组件,以帮助用户高效地开发一些功能.本章将带领大家一起来了解这些内置组件. 某些时候需要动态切换页面部分区域的视图,这个时候内置组件compon ...
form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...
未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象
本文翻译自:Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in ...

Vue3内置组件Teleport

`一.Teleport的介绍`

`二.`Teleport用法

`三.`场景使用

Vue3内置组件Teleport相关推荐

最新文章

热门文章

Vue3内置组件Teleport

一.Teleport的介绍

二.Teleport用法

三.场景使用

Vue3内置组件Teleport相关推荐

最新文章

热门文章

`一.Teleport的介绍`

`二.`Teleport用法

`三.`场景使用