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 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:
|
<<: How to install and use Server-U 14 version
>>: mysql 5.7.18 winx64 password change
Recommend
XHTML language default CSS style
html,address, blockquote, body,dd,div, dl,dt,fiel...
MYSQL8.0.13 free installation version configuration tutorial example detailed explanation
1. Download, I take 8.0 as an example Download ad...
Steps to export the fields and related attributes of MySQL tables
Need to export the fields and properties of the t...
Implementation of Nginx domain name forwarding https access
A word in advance: Suddenly I received a task to ...
Implementation of waterfall layout in uni-app project
GitHub address, you can star it if you like it Pl...
Why the explain command may modify MySQL data
If someone asked you whether running EXPLAIN on a...
jQuery manipulates cookies
Copy code The code is as follows: jQuery.cookie =...
Example explanation of MySQL foreign key constraints
MySQL's foreign key constraint is used to est...
How to set password for mysql version 5.6 on mac
MySQL can be set when it is installed, but it see...
Detailed example of using case statement in MySQL stored procedure
This article uses an example to illustrate the us...
Examples of correct use of maps in WeChat mini programs
Table of contents Preface 1. Preparation 2. Actua...
Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7
You always need data for development. As a server...
Detailed explanation of docker's high availability configuration
Docker Compose Docker Compose divides the managed...
Windows Server 2016 Standard Key activation key serial number
I would like to share the Windows Server 2016 act...
Detailed explanation of Navicat's slow remote connection to MySQL
The final solution is in the last picture If you ...