“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

My understanding of Teleport

The teleport will send your code somewhere to what place? Teleport is a technique that allows us to move our templates to a location in the DOM other than the Vue app. That is, it cannot be sent to the app. [Note] points like Doraemon's "arbitrary door" mainly used in the pop-up window, message prompt, such scenes! Let's use it briefly: We move the popover component under the bodyCopy the code

Scene description

The A-test component has the B-test component, the B-test component has the C-mask [popup component] and we click the button to move the C-mask [popup component] from the B-test component under the bodyCopy the code

There are a-test components under the container

<template> <div class="box"> <a-test></a-test> </div> </template> <script> import atest from '.. /components/a-test.vue' export default { components:{ 'a-test':atest, }, } </script>Copy the code

The A-test component has the B-test component

<template> <div class="a-test" > I am a-test component < B-test ></b-test> <div id="testdemo"></div> </div> </template> <script> import btest from '.. /components/b-test.vue' export default { components:{ 'b-test':btest }, } </script>Copy the code

There is a C-mask popup component under the B-test component

<template> <div class="b-test"> I am the B-test component <c-mask></c-mask> </div> </template> <script> import cmask from "./c-mask.vue" export default { components:{ 'c-mask':cmask }, } </script>Copy the code

C-mask [popup component] Component moves under body

<template> <div> <a-button type="primary" @click="openHander">open</a-button> <! Teleport to='body'> <div class="mask" v-if="showFlag"> <h1> Dialog box component </h1> <div> <a-button @click="openHander"> Close </a-button> </div> </teleport> </div> </template> <script> import {ref} from '@vue/reactivity' export default { setup () { let showFlag=ref(false) const openHander=()=>{ showFlag.value=! showFlag.value } return {showFlag,openHander} } } </script>Copy the code

The main points of attention

You can see that already by looking at these little particles. The thing to be aware of is that we can't move inside #app so we can create a container in index.html with id= myApp and pass it inside the myApp container, so let's seeCopy the code

Index.html creates a container

The < body > < div id = "app" > < / div > / / etc. will be transferred to here, < div id = "myapp" > < / div > < / body >Copy the code

transfer

<template> <div> <a-button type="primary" @click="openHander">open</a-button> <! <teleport to='#myapp'> <div class="mask" v-if="showFlag"> <h1> <a-button @click="openHander"> Close </a-button> </div> </teleport> </div> </template> <script> import {ref} from '@vue/reactivity' export default { setup () { let showFlag=ref(false) const openHander=()=>{ showFlag.value=! showFlag.value } return {showFlag,openHander} } } </script>Copy the code