Author: Michael Thiessen
Translator: Front-end Xiaozhi Source: news
Like and watch again , WeChat search [ Big Move to the World ] , station B pays attention to [ Front-end Xiaozhi ] , a person who does not have a big factory background, but has an upward and positive mentality. This article GitHub has been included in https://github.com/qq449245884/xiaozhi , the articles have been classified, and a lot of my documents and tutorial materials have been organized. A new feature of ve3 that has been discussed for some time is Portals (portal), which functions as a way to move template HTML to different places in the DOM. Portals is a common feature in React, and Vue2 can use the portal-vue library.
In Vue3, Teleport is provided to support this function.
Purpose of Teleport
The first thing I need to understand is when to use the Teleport feature.
When working on larger Vue projects, it's important to have the logic to organize your codebase. However, when dealing with certain types of components (like modals, notifications, or prompts), the logic for the template HTML may be in a different file than where we want the element to be rendered.
In fact, many times, these elements are much easier to manage when handled completely separately from our Vue app's DOM. All because of the position of handling nested components, z-index and styles can be tricky because of handling the scope of all their parents.
This is where Teleport comes in handy. We can write template code in the component where the logic resides, which means we can use the component's data or props . However, it is then rendered completely outside the scope of our Vue app.
Without using Teleport , we would have to worry about event propagation for passing logic from child components to the DOM tree, but it's much simpler now.
How Vue Teleport Works
Suppose we have some child components in which we want to trigger a popup notification. As just discussed, it would be simpler if the notifications were rendered in a completely separate DOM tree, rather than Vue's root #app element.
The first thing we do is open our index.html and add a ---87fc4dae917e6850fded0e1629ff8695 </body> before <div> .
// index.html
<body>
<div id="app"></div>
<div id='portal-target'></div>
</body>Next, create the component that triggers the notification to render.
// VuePortals.vue
<template>
<div class='portals'>
<button @click='showNotification'> Trigger Notification! </button>
<teleport to='#portal-target'>
<div v-if="isOpen" 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 code snippet, when the button is pressed, a notification for 2 seconds is rendered. However, our main goal is to use Teleport to get notifications to render outside of our Vue app.
As you can see, Teleport has a required attribute - to
to requires prop, must be a valid query selector or HTMLElement (if used in a browser environment). Specifies the target element in which the content will move <teleport>
Since we passed the code in #portal-target , Vue will find the #portal-target div contained in index.html and it will render all the code inside the Teleport into that div div in.
Here is the result of running:
Inspecting the element and looking at the DOM makes it clear what's going on.
We can use all the logic in the VuePortals component, but tell our project to render that template code elsewhere!
Summarize
The above is the basic introduction of Vue Teleport. In the near future, some more advanced use cases will be covered later, today's article is getting started with this cool feature!
For a more in-depth tutorial, check out the Vue3 documentation .
~End, I'm Shawanzhi, I'm going to brush late, my bones are white!
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .
Original: https://learn.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/
comminicate
The article is continuously updated every week. You can search for "Big Move to the World" on WeChat to read and update it as soon as possible (one or two articles earlier than the blog). This article GitHub https://github.com/qq449245884/xiaozhi has been included and sorted. Many of my documents, welcome to Star and improve, you can refer to the test center to review for interviews, and pay attention to the public account, reply to the benefits in the background, you can see the benefits, you know.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。