This is the 13th day of my participation in the August More Text Challenge.More challenges in August

This article will take a look at the final built-in component, Teleport, and what to look for when using them.

Why teleport

In Vue, we can build uIs by encapsulating THE UI and related behavior into components. We can also nest hierarchically, meaning that elements or components can be layered on top of each other, forming a UI tree.

However, sometimes a part of a component template logically belongs to that component, and from a technical point of view, it is best to move that part of the template to a location in the DOM other than the Vue app. Such as:

Create a component that contains full-screen mode. In most cases, you want the logic of the modal box to exist in the component, but quick positioning of the modal box is difficult to solve with CSS, or requires changing the component composition. At this point we can use Teleport to solve the problem.

How to use

Teleport has two Prop: to and Disabled.

  • The to – string. Prop is required and must be a valid query selector or HTMLElement (if used in a browser environment). Use to nine to transfer the contents of a teleport package to a specified element.

  • Disabled – Boolean. This optional property can be used to disable the functionality of < Teleport >, which means that the contents of the Teleport package will remain in the current location, unchanged.

to

Pass to the specified element using to as follows:

Before rendering

<div id="app">
    <h1>
        <teleport to="#app">
            <span>{{title}}</span>
        </teleport>
    </h1>
</div>
Copy the code

After the rendering

<div id="app" data-v-app="">
    <span>Hi, world!</span>
    <h1><! --teleport start--><! --teleport end--></h1>
</div>
Copy the code

From the above code, do you notice that span goes under div#app, that’s what teleport is for?

disabled

Use to to disable teleport as if it were immobilized, as follows: before rendering

<div id="app">
    <h1>// Disabled<teleport to="#app" :disabled="true">
            <span>{{title}}</span>
        </teleport>
    </h1>
</div>
Copy the code

After the rendering

<div id="app" data-v-app="">
    <h1>
        <! --teleport start-->
        <span>Hi, world!</span>
        <! --teleport end-->
    </h1>
</div>
Copy the code

Making :disabled=”true” disables teleport functionality.

Use with Components

We can use teleport in components to customize two components as follows:

my-component-child

 app.component('my-component-child', {
    props: ['name'].template: `<span>{{name}}</span>`
})
Copy the code

my-component

app.component('my-component', {
    template: `
 hello 
        
         
        
`
})
Copy the code

Note here that even if you render my-Component-Child in a different place, it will still be a child of my-Component and will receive a Name prop from it.

Use multiple teleports on the same target

Sometimes we have the need for multiple

components to mount their content on the same target element. The order will be a simple append — the later mount will follow the earlier mount in the target element. As follows: before rendering

<div id="app">
    <h3>
        <teleport to="#app">
            <h1>hello</h1>
        </teleport>
        <teleport to="#app">
            <h1>world</h1>
        </teleport>
    </h3>
</div>
Copy the code

After the rendering

<div id="app" data-v-app="">
    <h1>hello</h1>
    <h1>world</h1>
    <h3>
        <! --teleport start--><! --teleport end-->
        <! --teleport start--><! --teleport end-->
    </h3>
</div>
Copy the code

conclusion

Teleport is very useful in actual development, so we can deal with some requirements more comprehensively.

Let’s say I need a full-screen feature but to display it on its parent or whatever, we can use Teleport. Without it, we need to write a lot of complicated logic to implement this feature.

For more articles, the portal has opened: Look back at the Vue3 catalogue!