vue3 Teleport瞬间移动函数使用方法详解

vue3 Teleport瞬间移动函数的使用，供大家参考，具体内容如下

Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件"

他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的

以一个例子来看:编写一个弹窗组件

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中使用的时候跟普通组件调用是一样的

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文件中使用的时候,modal是在app的 DOM节点之下的,父节点的dom结构和css都会给modal产生影响
于是产生的问题

1.modal被包裹在其它组件之中，容易被干扰
2.样式也在其它组件中，容易变得非常混乱

Teleport 可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
使用的时候 to属性可以确定想要挂载的DOM节点下面

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

在Public文件夹下的index.htML中增加一个节点

!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组件的影响了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Vue3内置组件Teleport使用方法详解
• 详解Vue3中Teleport的使用
• vue3 teleport的使用案例详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！