Shulou(Shulou.com)06/03 Report--

This article mainly explains "how Vue3 Teleport works". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how Vue3 Teleport works.

The purpose of Teleport

The first thing I need to know is when to use the Teleport feature.

When dealing with larger Vue projects, it is important to have logical processing to organize the code base. However, when dealing with certain types of components (such as patterns, notifications, or prompts), the logic of the template HTML may be in a different file than where we want to render the elements.

In fact, in many cases, these elements are much easier to manage when they are handled completely separate from the DOM of our Vue application. All of this is due to dealing with the location of nested components, and z-index and styles can become tricky by dealing with the scope of all their parent objects.

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 completely rendered out of the scope of our Vue application.

If we didn't use Teleport, we would have to worry about event propagation that passes logic from subcomponents to the DOM tree, but it's much simpler now.

How does Vue Teleport work

Suppose we have some subcomponents in which we want to trigger pop-up notifications. As just discussed, it would be easier to render the notification as a completely separate DOM tree rather than the root # app element of Vue.

The first thing we need to do is to open our index.html and add one before.

/ / index.html

Next, create the component that triggers the notification to render.

/ / VuePortals.vue Trigger Notification! This is rendering outside of this child component! 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}} .notification {font-family: myriad-pro, sans-serif Position: fixed; bottom: 20px; left: 20px; width: 300px; padding: 30px; background-color: # fff;}

In this code snippet, a 2-second notification is rendered when the button is pressed. However, our main goal is to use Teleport to get notifications for rendering outside of our Vue application.

As you can see, Teleport has a required attribute-to

To requires prop and must be a valid query selector or HTMLElement (if used in a browser environment). Specify the target element in which the content will be moved

Because we passed the code in # portal-target, Vue will find the # portal-target div contained in the index.html, and it will render all the code in the Teleport to that div.

Here is the result of the run:

Check the elements and look at the DOM to see exactly what happened.

We can use all the logic in the VuePortals component, but tell our project to render the template code somewhere else!

Thank you for your reading, the above is the content of "how Vue3 Teleport works", after the study of this article, I believe you have a deeper understanding of how Vue3 Teleport works, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.