vue3中teleport组件有什么用?用法是什么?
Admin 2022-04-24 群英技术资讯 912 次浏览
这篇文章给大家介绍一下vue3中teleport组件,一些朋友可能对teleport组件不是很了解,其实teleport组件对解决Modal的定位问题有很大的用处,接下来我们通过实例来了解一下teleport组件。
Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport 。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。
使用场景
业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件。相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题。
话不多说,我们先写一个简单的 Modal 组件。
弹窗标题
x弹窗文本内容
然后我们在页面中引入 Modal 组件。
如上图所示,div.container下弹窗组件正常展示。使用fixed进行布局的元素,在一般情况下会相对于屏幕视窗来进行定位,但是如果父元素的transform,perspective或filter属性不为none时,fixed元素就会相对于父元素来进行定位。
我们只需要把.container类的transform稍作修改,弹窗组件的定位就会错乱。
这个时候,使用Teleport组件就能解决这个问题了。
Teleport 提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下呈现 HTML,而不必求助于全局状态或将其拆分为两个组件。 -- Vue 官方文档
我们只需要将弹窗内容放入Teleport内,并设置to属性为body,表示弹窗组件每次渲染都会做为body的子级,这样之前的问题就能得到解决。
...
可以在 https://codesandbox.io/embed/vue-modal-h5g8y 查看代码。
源码解析
我们可以先写一个简单的模板,然后看看Teleport组件经过模板编译后,生成的代码。
Vue.createApp({ template: `teleport to body` })
简化后代码:
function render(_ctx, _cache) { with (_ctx) { const { createVNode, openBlock, createBlock, Teleport } = Vue return (openBlock(), createBlock(Teleport, { to: "body" }, [ createVNode("div", null, " teleport to body ", -1 /* HOISTED */) ])) } }
可以看到Teleport组件通过createBlock进行创建。
// packages/runtime-core/src/renderer.ts export function createBlock( type, props, children, patchFlag ) { const vnode = createVNode( type, props, children, patchFlag ) // ... 省略部分逻辑 return vnode } export function createVNode( type, props, children, patchFlag ) { // class & style normalization. if (props) { // ... } // encode the vnode type information into a bitmap const shapeFlag = isString(type) ? ShapeFlags.ELEMENT : __FEATURE_SUSPENSE__ && isSuspense(type) ? ShapeFlags.SUSPENSE : isTeleport(type) ? ShapeFlags.TELEPORT : isObject(type) ? ShapeFlags.STATEFUL_COMPONENT : isFunction(type) ? ShapeFlags.FUNCTIONAL_COMPONENT : 0 const vnode: VNode = { type, props, shapeFlag, patchFlag, key: props && normalizeKey(props), ref: props && normalizeRef(props), } return vnode } // packages/runtime-core/src/components/Teleport.ts export const isTeleport = type => type.__isTeleport export const Teleport = { __isTeleport: true, process() {} }
传入createBlock的第一个参数为Teleport,最后得到的 vnode 中会有一个shapeFlag属性,该属性用来表示 vnode 的类型。isTeleport(type)得到的结果为true,所以shapeFlag属性最后的值为ShapeFlags.TELEPORT(1 << 6)。
// packages/shared/src/shapeFlags.ts export const enum ShapeFlags { ELEMENT = 1, FUNCTIONAL_COMPONENT = 1 << 1, STATEFUL_COMPONENT = 1 << 2, TEXT_CHILDREN = 1 << 3, ARRAY_CHILDREN = 1 << 4, SLOTS_CHILDREN = 1 << 5, TELEPORT = 1 << 6, SUSPENSE = 1 << 7, COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, COMPONENT_KEPT_ALIVE = 1 << 9 }
在组件的 render 节点,会依据type和shapeFlag走不同的逻辑。
// packages/runtime-core/src/renderer.ts const render = (vnode, container) => { if (vnode == null) { // 当前组件为空,则将组件销毁 if (container._vnode) { unmount(container._vnode, null, null, true) } } else { // 新建或者更新组件 // container._vnode 是之前已创建组件的缓存 patch(container._vnode || null, vnode, container) } container._vnode = vnode } // patch 是表示补丁,用于 vnode 的创建、更新、销毁 const patch = (n1, n2, container) => { // 如果新旧节点的类型不一致,则将旧节点销毁 if (n1 && !isSameVNodeType(n1, n2)) { unmount(n1) } const { type, ref, shapeFlag } = n2 switch (type) { case Text: // 处理文本 break case Comment: // 处理注释 break // case ... default: if (shapeFlag & ShapeFlags.ELEMENT) { // 处理 DOM 元素 } else if (shapeFlag & ShapeFlags.COMPONENT) { // 处理自定义组件 } else if (shapeFlag & ShapeFlags.TELEPORT) { // 处理 Teleport 组件 // 调用 Teleport.process 方法 type.process(n1, n2, container...); } // else if ... } }
可以看到,在处理Teleport时,最后会调用Teleport.process方法,Vue3 中很多地方都是通过 process 的方式来处理 vnode 相关逻辑的,下面我们重点看看Teleport.process方法做了些什么。
// packages/runtime-core/src/components/Teleport.ts const isTeleportDisabled = props => props.disabled export const Teleport = { __isTeleport: true, process(n1, n2, container) { const disabled = isTeleportDisabled(n2.props) const { shapeFlag, children } = n2 if (n1 == null) { const target = (n2.target = querySelector(n2.prop.to)) const mount = (container) => { // compiler and vnode children normalization. if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) { mountChildren(children, container) } } if (disabled) { // 开关关闭,挂载到原来的位置 mount(container) } else if (target) { // 将子节点,挂载到属性 `to` 对应的节点上 mount(target) } } else { // n1不存在,更新节点即可 } } }
其实原理很简单,就是将Teleport的children挂载到属性to对应的 DOM 元素中。为了方便理解,这里只是展示了源码的九牛一毛,省略了很多其他的操作。
总结
希望在阅读文章的过程中,大家能够掌握Teleport组件的用法,并使用到业务场景中。尽管原理十分简单,但是我们有了Teleport组件,就能轻松解决弹窗元素定位不准确的问题。
关于vue3中teleport组件的内容就介绍到这,总的来说teleport组件还是比较实用的,希望本文能对大家有帮助,想要了解更多teleport组件的内容,大家可以关注其它的相关文章。
文本转载自脚本之家
相关阅读:
vue怎样做多层循环表单验证?
vue项目如何做主题切换?方法是什么?
vuex数据持久化实现有什么方法?
用vue怎样做拖拽排序的功能?
vue图片裁剪组件的用法是什么?
浅谈那些实用的vue修饰符及用法
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章我们来了解JavaScript中wrap()方法的使用,下文介绍了wrap()方法的用处,基本语言以及相关示例,对大家学习wrap()方法会有一定的参考价值,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
JavaScript怎么创建多个对象?javascript面向对象创建多个对象的方法,哪个最好用?字面量?工厂模式方法?构造函数方法?原型方法?原型加构造函数方法?进来一看便知。
js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果。当检查对象上某个属性是否存在时,hasOwnProperty 是唯一可用的方法。
js如何查找字符串的最长单词?这篇文章给大家分享是关于基于Free Code Camp基本算法脚本来查找字符串的最长单词,本文会介绍三种方法,是小编比较推荐的,有需要的朋友可以看一看。
本篇文章带大家聊聊ES6,带你30分钟熟练使用最常用的ES6,还不学是等着被卷死?
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008