Detailed explanation of the use of Teleport in Vue3

Purpose of Teleport
How Teleport works

In this article, we will cover:

Purpose of Teleport
Teleport Example
Some interesting code interactions

Purpose of Teleport

First of all, when and how to use the Teleport feature.

When developing larger Vue projects, you should organize your code into reusable logic. But when dealing with certain types of components, such as modals, notifications, or tooltips, the logic of the template HTML may not be in the same file as where we want the rendered element.

In fact, in most cases, it's much easier to deal with these elements than with Vue's completely separate DOM. Because things like position, z-index, and styling of nested components can get tricky because you need to deal with the scope of all their parents.

This is where Teleport comes in. We can write template code in the component where the logic is located because then we can use the component's data or props.

Without Teleport, we also have to worry about event propagation to pass logic from child components up the DOM tree.

How Teleport works

Suppose we have some child component in which we want to trigger a notification popup. As just discussed, it would be much simpler if the notifications were rendered in a completely separate DOM tree, rather than in Vue's root #app element.

First edit index.html and add a <div> before </body>.

//index.html
<body>
   <div id="app"></div>
   <div id='portal-target'></div>
</body>

Next, create the component that triggers the render notification.

//VuePortals.vue
<template>
  <div class='portals'>
    <button @click='showNotification'> Trigger Notification! </button>
    <teleport to='#portal-target'>
      <div 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 is rendered for 2 seconds. But our main goal is to use Teleport to get notifications and render outside the VUE program.

As you can see, Teleport has one required attribute: to

The to attribute takes a valid DOM query string, which can be:

The ID of the element
The class of the element
Data Selector
Response query string

Since we passed the code in #portal-target, the Vue program will find the #portal-target div that we included in index.html, and it will pass all the code in the portal and render it in that div.

Here are the results:

Inspecting the element and looking at the DOM gives a pretty clear idea of what’s going on.

We can use all the logic from the VuePortals component, but we need to tell our project which template code to render somewhere else.

The above is a detailed explanation of Teleport in Vue3. For more information about Teleport in Vue3, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of how to use Teleport, a built-in component of Vue3
Detailed explanation of the practice and principle of Vue3 Teleport
Detailed explanation of how to use the vue3 Teleport instant movement function
How to implement teleport of vue3 in vue2

<<: Implementation of IP address configuration in Centos7.5

>>: MySQL database monitoring software lepus usage problems and solutions

MySQL optimization: use join instead of subquery

Detailed explanation of the use of Teleport in Vue3

Table of contents

Purpose of Teleport

How Teleport works

MySQL optimization: use join instead of subquery

Using js to realize dynamic background

Detailed explanation of Vue Notepad example

Detailed steps to configure MySQL remote connection under Alibaba Cloud

Detailed explanation of the observer mode starting from the component value transfer of Vue

Learning to build React scaffolding

Solution to the bug that IE6 select cannot be covered by div

W3C Tutorial (12): W3C Soap Activity

Solution ideas and implementation steps for the problem of css and js becoming invalid after struts2 jump

WeChat applet implementation anchor positioning function example

Recommend

Linux kernel device driver kernel linked list usage notes

Building the User Experience

What kinds of MYSQL connection queries do you know?

MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC

Steps to package and deploy the Vue project to the Apache server

HTML tutorial, HTML default style

An article to help you understand the basics of VUE

Detailed explanation of the use of state in React's three major attributes

Detailed explanation of the idea of querying the difference between hourly data and last hourly data in MySQL

CentOS 7.5 deploys Varnish cache server function

Vue uses calculated properties to complete the production of dynamic sliders

A brief discussion on HTML doctype and encoding

Examples of 4 methods for inserting large amounts of data in MySQL

A brief discussion on adaptive layout issues on mobile devices (responsive, rem/em, Js dynamics)

Teach you how to write maintainable JS code