This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

For Vue3, which has been out for a while, there are many new features worth learning. I have also explored and learned intermittently, but it is not too systematic and there is no summary. Here I make some summary of learning, record && accumulation!

A few previous articles started with a summary: a first look at Vue3, the Vue3 lifecycle and the detailed use of the setup() function and computed & Watch. This article continues: a new Vue3 feature: Teleport

Teleport

Teleport English document address: v3.vuejs.org/guide/telep…

Of course, there is still a little bit do not understand! , can look at the Chinese document:

Teleport address: Chinese documents v3.cn.vuejs.org/guide/telep…

What is Teleport?

Teleport means Teleport, Teleport, Teleport, Teleport. Keep reading

In Vue2 and earlier versions, we used to write a node in index. HTML with the id App, and the result is that all component nodes are mounted on the root node.

Some components (such as the prompt) disappear after a few seconds and the component is destroyed. This may cause the message popup component to be affected by the parent node

Vue3 adds a new default component called Teleport, which can be used directly. It exposes a to property and takes a CSS Query Selector as an argument. The selector argument represents which DOM element to render the component into.

Teleport tried it out

Here’s the simplest chestnut:

/// index.html > div#App

<! Render result: -->
<div id="App">
  <! All page components are rendered inside the #App tag, no matter how deep you nested them... -->
</div>

<div id="modals">
  <div>This is a Teleport component that will be rendered onto the '#modals' tag when the ID selector is specified</div>
</div>
Copy the code

// Teleport component contents:

<! Write a Teleport component -->
<teleport to="#modals">
  <div>This is a Teleport component that will be rendered and mounted on the '#modals' tag when the ID selector is specified</div>
</teleport>
Copy the code

Of course, multiple Teleport components can also be attached to a tag, and the same #App can contain multiple contents after rendering.