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

Use Docker Compose to quickly deploy ELK (tested and effective)

Table of contents 1. Overview 1.1 Definition 1.2 ...

HTML tutorial, understanding the optgroup element

Select the category selection. After testing, IE ...

5 Easy Ways to Free Up Space on Ubuntu

Preface Most people will probably perform this op...

jQuery framework implements three animation methods of element display and hiding

Table of contents 1. Display and hide by default ...

Tomcat maxPostSize setting implementation process analysis

1. Why set maxPostSize? The tomcat container has ...

Summary of @ usage in CSS (with examples and explanations)

An at-rule is a declaration that provides instruc...

Detailed explanation of the use of umask under Linux

I recently started learning Linux. After reading ...

Vue3 Documentation Quick Start

Table of contents 1. Setup 1. The first parameter...

How to use vuex in Vue project

Table of contents What is Vuex? Vuex usage cycle ...

Detailed explanation of Javascript basics

Table of contents variable Data Types Extension P...

JavaScript event loop case study

Event loop in js Because JavaScript is single-thr...

Solve the problem of "Welcome to nginx on Fedora!" after installing nginx on Centos7, and there is no default.conf file in the conf.d directory

Problem Description Install nginx on Tencent Clou...

Common problems in implementing the progress bar function of vue Nprogress

NProgress is the progress bar that appears at the...

Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server

1. Download, install and configure mysql-8.0.15 1...

JavaScript function call, apply and bind method case study

Summarize 1. Similarities Both can change the int...