Quickly get started with VUE 3 teleport components and usage syntax

1. Introduction to teleport

The teleport component provides a concise way to specify the parent element of the content inside it. In simple terms, the content in teleport allows us to control it in any DOM, which is easy to use.

Use syntax:

<teleport to="body">
    <div>
   Content to be created</div>  
</teleport>

The to attribute specifies the DOM element to which the content in the teleport is added. It can be a tag name, an id or a class name.

//Tag name. The above example is added to the body element, using the tag name.
<teleport to="body"></teleport>

//Class name. For example: to=".className"
<teleport to=".className"></teleport>

//id name <teleport to="#idName"></teleport>

1.1. Use multiple teleports

Multiple teleport portal components can mount all their contents to one target. The contents of multiple teleport components are sibling nodes, with the first mounted one in front and the later mounted one in the back.

Use as follows:

<teleport to="body">
    <div class="first">
   The first mounting element</div>  
</teleport>
<teleport to="body">
    <div class="second">
   The second mounting element</div>  
</teleport>

The running results are shown in the figure:

The above example is equivalent to:

<teleport to="body">
 <div class="first">
  The first mounting element</div>
 <div class="second">
  The second mounting element</div>
</teleport>

2. Why use teleport?

When developing with Vue, multiple components are constantly nested, which makes it difficult to handle the style or hierarchy of elements. For example, if we need to add a modal or toast prompt box, it will be easier to set the style and hierarchy if we can separate such a box from the vue component.

Some students may think, wouldn’t it be better to put it directly in index.html? In addition, the modal and toast elements need to use the state value of the vue component to control the hiding and display of the modal and toast through the state. If you put it directly into index.html, the state control will be complicated.

So the teleport component comes in handy. It is a bit like the anywhere door in "Doraemon", which can teleport elements to any element. You can also use the state value in the vue component to control it.

3. Teleport Application

A project created using vite + vue 3. For details on how to create a project, please refer to "What, you are still using webpack? Others are using vite to build projects" article.

After the Vue 3 project is created, find the index.htm file and add:

<div id="newModal"></div>    

In the component file, add the teleport component:

<button @click="showModal" class="btn">Open modal </button>
<!-- The to attribute is the target location-->
<teleport to="#newModal">
 <div v-if="visible">
  <div>I am a Modal box</div>
  </div>
</teleport>

From the running results, we found that the teleport component used transmits the content to <div></div> through the to attribute, which is at the same level as <div></div>. At this time, the hiding and display of elements in teleport is completely determined by the state value in the vue component.

4. Pitfalls that Beginners May Encounter

Some students directly introduced the teleport component in their own projects. After running, they found that the component was output as is, but was not parsed, and an error was reported.

The error message is as follows:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <teleport> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Then I searched for solutions on the Internet, but found that I couldn’t find any!

The root cause is that you are still using vue2, not vue3. Some students regard the project created by scaffolding vue-cli 3 as vue3. There is no necessary connection between creating a project with vue-cli 2 and vue-cli 3 and whether it is vue3.

This is the end of this article about how to quickly get started with the VUE 3 teleport component. For more related VUE 3 teleport content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!