One of the new features of Vue3 that has been talked about for a while is the idea of Portals — or ways to move template HTML to different parts of the DOM. Portals, which are a common feature in React, were available in Vue2 under the portal-vue library.
讨论了一段时间的Vue3的新功能之一就是门户的概念，也就是将模板HTML移到DOM的不同部分的方法。 Portal是React中的常见功能，可在Portal-vue库下的Vue2中使用。
Now in Vue3, there is native support for this concept using the Teleport feature.
现在在Vue3中，使用Teleport功能对该概念提供了本机支持。
In this tutorial, we’ll cover:
在本教程中，我们将介绍：
- The purpose of Teleport 传送的目的
- A basic example of Teleport 传送的基本示例
- Some cool code interactions 一些很酷的代码交互
Here’s an example of what we’ll be making.
这是我们将要做的事的一个例子。
And this is the DOM using Teleport. As you can see, there is this portal-target div outside of our Vue app where our template code is being “teleported”.
这是使用Teleport的DOM。 如您所见，在我们的Vue应用程序外部有一个门户目标div，其中模板代码正在“传送”。
Okay! Let’s just jump right in.
好的！ 让我们直接进入。
传送的目的 (Purpose of the Teleport)
The first thing we have to understand is when/why this Teleport function can come in handy.
我们必须了解的第一件事是何时/为什么可以使用此Teleport功能。
When working with larger Vue projects, it becomes important to organize your codebase in a logical manner. However, when dealing with certain types of components like modals, notifications, or tooltips, the logic for the template HTML may be in a different file than where we would want to render the element.
在处理较大的Vue项目时， 以逻辑方式组织代码库非常重要。 但是，在处理某些类型的组件(如模式，通知或工具提示)时，模板HTML的逻辑可能位于与我们希望呈现元素的位置不同的文件中。
In fact, a lot of the time, these elements are much easier to manage when they are handled entirely separately from the DOM of our Vue app. All because handling the positioning, z-index, and styling of nested components can get tricky due to handling the scope of all of its parents.
实际上，在很多情况下，与我们的Vue应用程序的DOM完全分开处理时，这些元素的管理要容易得多 。 所有这些都是因为处理嵌套组件的位置，z-index和样式可能由于处理其所有父对象的范围而变得棘手。
This is where the Teleport function comes in handy. We can write Template code in the component where it’s logic is located — meaning we can use a component’s data or props. But then render it outside of the scope of our Vue app entirely.
这是Teleport功能派上用场的地方。 我们可以在逻辑所在的组件中编写模板代码，这意味着我们可以使用组件的数据或props 。 但是，然后完全将其渲染到Vue应用程序的范围之外。
Without using Teleport, we would have to worry about event propagation to pass the logic from a child component up the DOM Tree, but now it’s much simpler.
如果不使用Teleport，我们将不得不担心事件传播，以将逻辑从子组件传递到DOM树，但是现在它变得更加简单。
Let’s look at an example.
让我们来看一个例子。
Vue Teleport如何工作 (How Vue Teleport works)
Let’s say that we have some child component where we want to trigger a notification to pop up. As we were just discussing, it’s simpler if we render this notification in an entirely separate DOM tree than Vue’s root #app element.
假设我们有一些子组件，我们想在其中触发弹出的通知。 正如我们刚才所讨论的，如果将通知完全呈现在与Vue的根#app元素完全不同的DOM树中，则更为简单。
The first thing we would want to do is go to our index.html and add a <div> right before </body>.
我们要做的第一件事是转到我们的index.html并在</body>之前添加一个<div </body> 。
<body>
<div id="app"></div>
<div id='portal-target'></div>
</body>Next, let’s start creating our component that triggers the notification to render. If you’re not familiar with Vue3, definitely check out this Vue3 introduction!
接下来，让我们开始创建触发通知呈现的组件。 如果您不熟悉Vue3，请务必查看此Vue3简介！
<template>
<div class='portals'>
<button @click='showNotification'> Trigger Notification! </button>
<teleport to='#portal-target'>
<div class='notification'>
This is rendering outside of this child component!
</div>
</teleport>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const isOpen = ref(false)
var closePopup
const showNotification = () => {
isOpen.value = true
clearTimeout(closePopup)
closePopup = setTimeout(() => {
isOpen.value = false
}, 2000)
}
return {
isOpen,
showNotification
}
}
}
</script>
<style scoped>
.notification {
font-family: myriad-pro, sans-serif;
position: fixed;
bottom: 20px;
left: 20px;
width: 300px;
padding: 30px;
background-color: #fff;
}
</style>In this snippet, when the button is pressed, a notification will be rendered for 2 seconds. However, our main goal is to use Teleport to get the notification to render outside our Vue app.
在此代码段中，当按下按钮时，将呈现2秒钟的通知。 但是，我们的主要目标是使用Teleport获取通知以在我们的Vue应用程序外部呈现。
As you can see, Teleport has one required attribute — to
如您所见，Teleport具有一个必需的属性-
The to attribute takes in a valid DOM query string and it can be the:
to属性采用有效的DOM查询字符串，它可以是：
- id of an element 元素的ID
- class of an element 元素类别
- data selector 数据选择器
- a responsive query string 响应式查询字符串
Since we passed it in #portal-target, our Vue app will locate the #portal-target div we included in index.html and it will teleport all the code inside the portal and render it inside that div.
由于我们在#portal-target传递了代码，因此我们的Vue应用将找到我们包含在index.html中的#portal-target div，它将在门户内传送所有代码并将其呈现在该div中。
This is what our result should be.
这就是我们的结果。
Inspecting the elements and looking at the DOM makes it very clear what’s happening.
检查元素并查看DOM可以很清楚地了解正在发生的事情。
Basically, we can use all of the logic from our VuePortals component, but tell our project to render that template code somewhere else!
基本上，我们可以使用VuePortals 组件中的所有逻辑，但是告诉我们的项目在其他地方渲染该模板代码！
结论 (Conclusion)
And that’s a quick introduction to Vue Teleport. I’ll likely write an in-depth guide to some more advanced use cases in the near future, but this should be a great place to get started working with this cool feature!
这是Vue Teleport的快速介绍。 在不久的将来，我可能会写一些更高级的用例的深入指南，但这应该是开始使用此炫酷功能的好地方！
For a more in-depth tutorial, definitely check out the Vue3 documentation.
If you have any questions, just leave a comment :)
如果您有任何疑问，请发表评论:)
Happy coding!
编码愉快！
If you’re interested in learning more about VueJS click here to get a free Vue cheatsheet with all the essential code snippets for developers and click here to access our Vue3 Build Along Course.
如果您想了解有关VueJS的更多信息，请单击此处以获取免费的Vue速查表，其中包含针对开发人员的所有基本代码段 ，然后单击此处以访问我们的Vue3 Build With Course。
翻译自: https://medium.com/@mattmaribojoc/an-introduction-to-vue-teleport-a-new-feature-in-vue3-e9ddbf58dd25
扫一扫
2482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
