vue3 Teleport瞬間移動(dòng)函數(shù)使用方法詳解

更新時(shí)間：2021年03月05日 07:57:06 作者：柏特-Better

這篇文章主要為大家詳細(xì)介紹了vue3 Teleport瞬間移動(dòng)函數(shù)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue3 Teleport瞬間移動(dòng)函數(shù)的使用，供大家參考，具體內(nèi)容如下

Teleport一般被翻譯成瞬間移動(dòng)組件,實(shí)際上是不好理解的.我把他理解成"獨(dú)立組件"

他可以那你寫的組件掛載到任何你想掛載的DOM上,所以是很自由很獨(dú)立的

以一個(gè)例子來看:編寫一個(gè)彈窗組件

<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>

在app.vue中使用的時(shí)候跟普通組件調(diào)用是一樣的

<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>

要是在app.vue文件中使用的時(shí)候,modal是在app的 DOM節(jié)點(diǎn)之下的,父節(jié)點(diǎn)的dom結(jié)構(gòu)和css都會(huì)給modal產(chǎn)生影響
于是產(chǎn)生的問題

1.modal被包裹在其它組件之中，容易被干擾
2.樣式也在其它組件中，容易變得非常混亂

Teleport 可以把modal組件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,這樣就可以互不干擾了,可以把Teleport看成一個(gè)傳送門,把你的組件傳送到任何地方
使用的時(shí)候 to屬性可以確定想要掛載的DOM節(jié)點(diǎn)下面

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

在public文件夾下的index.html中增加一個(gè)節(jié)點(diǎn)

<!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>

這樣可以看到modal組件就是沒有掛載在app下,不再受app組件的影響了