Detailed explanation of how to use the vue3 Teleport instant movement function

The use of vue3 Teleport instant movement function is for your reference. The specific content is as follows

Teleport is usually translated as instant teleportation component, which is actually difficult to understand. I understand it as "independent component"

It can mount the components you write to any DOM you want, so it is very free and independent.

Take an example: Writing a pop-up component

<template>
<teleport to="#modal">
 <div id="center" v-if="isOpen">
 <h2><slot>this is a modal</slot></h2>
 <button @click="buttonClick">Close</button>
 </div>
</teleport>
</template>
<script lang="ts">

export default {
 props: {
 isOpen: Boolean,
 },
 emits:
 'close-modal': null
 },
 setup(props, context) {
 const buttonClick = () => {
 context.emit('close-modal')
 }
 return {
 buttonClick
 }
 }
}
</script>
<style>
 #center {
 width: 200px;
 height: 200px;
 border: 2px solid black;
 background: white;
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -100px;
 margin-top: -100px;
 }
</style>

When used in app.vue, it is the same as calling a normal component.

<template>
<div id="app">
 <img alt="Vue logo" src="./assets/logo.png">
 <HelloWorld msg="Welcome to Your Vue.js App"/>
 <HooksDemo></HooksDemo>
 <button @click="openModal">Open Modal</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
</div>
 
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import HooksDemo from './components/HooksDemo.vue'
import Modal from './components/Modal.vue'
import{ref} from 'vue'
export default {
 name: 'App',
 components:
 HelloWorld,
 HooksDemo,
 Modal
 },
 setup() {
 const modalIsOpen = ref(false)
 const openModal = () => {
 modalIsOpen.value = true
 }
 const onModalClose = () => {
 modalIsOpen.value = false
 }
 return {
 modalIsOpen,
 openModal,
 onModalClose
 }
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

If used in the app.vue file, the modal is under the DOM node of the app, and the DOM structure and css of the parent node will affect the modal, thus causing problems

1. Modal is wrapped in other components and is easily interfered with
2. The styles are also in other components, which can easily become very confusing

Teleport can render modal components to any external DOM you want to render, without having to nest them in #app, so that they do not interfere with each other. You can think of Teleport as a portal to transmit your components to any place. When you use it, the to attribute can determine the DOM node you want to mount it under.

<template>
 <teleport to="#modal">
 <div id="center">
 <h2>better</h2>
 </div>
 </teleport>
</template>

Add a node in index.html under the public folder

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" >
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <noscript>
 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <div id="modal"></div>
 <!-- built files will be auto injected -->
 </body>
</html>

In this way, you can see that the modal component is not mounted under the app and is no longer affected by the app component.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: