Detailed explanation of the use of Teleport in Vue3

Detailed explanation of the use of Teleport in Vue3

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

Recommend

Detailed steps to install MySQL 5.7 via YUM on CentOS7

1. Go to the location where you want to store the...

Alibaba Cloud Centos7 installation and configuration of SVN

1. Install SVN server yum install subversion 2. C...

Introduction to Linux File Compression and Packaging

1. Introduction to compression and packaging Comm...

4 flexible Scss compilation output styles

Many people have been told how to compile from th...

Install redis and MySQL on CentOS

1|0MySQL (MariaDB) 1|11. Description MariaDB data...

Detailed explanation of the practical application of centos7 esxi6.7 template

1. Create a centos7.6 system and optimize the sys...

Encapsulate the navigation bar component with Vue

Preface: Fully encapsulating a functional module ...

Vue calls the PC camera to realize the photo function

This article example shares the specific code of ...

A brief discussion on the role and working principle of key in Vue3

What is the function of this key attribute? Let’s...

How to solve the mysql insert garbled problem

Problem description: When inserting Chinese chara...

Detailed tutorial on jdk installation and environment variable configuration under Win10

Table of contents Preface 1. Preparation 2. Insta...

A simple way to change the password in MySQL 5.7

This is an official screenshot. After MySQL 5.7 i...

How to install the standalone version of spark in linux environment without using hadoop

Big data continues to heat up, and if you are not...

In-depth analysis of Nginx virtual host

Table of contents 1. Virtual Host 1.1 Virtual Hos...

Detailed explanation of routing parameter passing and cross-component parameter passing in Vue

Route Jump this.$router.push('/course'); ...