Author: Matt Maribojoc
Translator: Front-end Xiaozhi
Source: stackabuse
If you have dreams and dry goods, search [Moving to the World] pay attention to this brush bowl wisdom who is still washing dishes in the early morning.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi , and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.
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 the portal-vue library is available in Vue2.
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 handling nested components where, z-index and styles can be tricky because of handling the scope of all their parents.
This situation 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 had to worry about event propagation 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 </body> before the <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 one 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 <teleport> content will be moved
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 .
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 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/
communicate with
If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。