Vue3中内置组件Teleport怎么使用

本篇内容介绍了“Vue3中内置组件Teleport怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！不管是 Vue2 还是 Vue3 中都有内置组件的存在，如 component 内置组件、transition 内置组件等等。内置组件就是官方给我们封装的全局组件，我们直接拿来用就可以了。在 Vue3 中新增了 Teleport 内置组件，先来看下官方文档是怎么解释的。是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。通俗解释：teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。假如在父组件中引用了一个子组件，那么渲染成页面后这个子组件 HTML 也是必然被父组件 HTML 包含的。但是如果把子组件放置到了 teleport 组件中，那么我们就可以指定该子组件渲染到父组件之外的其它 DOM 节点下，比如 body 或者其它的 DOM 等等。这就有点类似与“传送”了。我们使用 Vue 的 UI 组件库的时候，经常会用到模态框这个组件。如：使用 Element-plus 的模态框。上段代码中在 App.vue 组件里面引用了 Element-plus 的弹窗组件，并且添加了一个 append-to-body 属性。可以看到虽然弹窗组件是写在 App.vue 组件里面的，但是渲染出来的结果却是弹窗组件属于 body 节点，这是因为利用了 Elem免费云主机域名ent-plus 中弹窗的 append-to-body 属性，我们把该属性去掉再看看什么结果：可以看到弹窗组件又乖乖的跑到了 App.vue 组件下面。为何要这样做？很简单，假如有非常多的弹窗，那么如何管理它们的 z-index 呢，也就是同时弹窗时的层级关系，如果每个弹窗都在各自的父组件中，那么我们是没法控制的，所有有必要把它们都拧出来，放在同一个父元素下面，这样就可以方便的设置层级关系了。这和 teleport 组件有什么关系吗？有很大的关系，上面弹窗的 append-to-body 属性效果是 Element 给我们做的，要是我们想自己实现这样的效果，该怎么办呢？我们就可以使用内置组件 teleport 了。从上图可以看出，Teleport 包裹的元素虽然是属于 app.vue 组件，但是渲染过后它却被渲染在了 body 这个 dom 元素下面了。
这都得归功于 Teleport 得传送功能，它的用法很简单，语法代码如下：其中 to 就是“传送”的目的地了，即需要把包裹的内容传送到何处去。 只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果包含了一个组件，那么该组件始终和这个使用了的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。在某些场景下可能需要视情况禁用，我们可以通过对动态地传入一个 disabled prop 来处理这两种不同情况（ disabled 属性接收一个 Boolean 值，true 代表不允许传送，false 代表传送）。我是被teleport包裹的元素{{message}}多个组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。我是被teleport包裹的一号元素我是被teleport包裹的二号元素“Vue3中内置组件Teleport怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: ElementUI下拉框选择后不显示值如何解决

这篇文章主要介绍免费云主机域名了ElementUI下拉框选择后不显示值如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ElementUI下拉框选择后不显示值如何解决文章都会有所收获，下面我们一起来看看吧。问题vue(Elem…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。