我对teleport的理解
teleport有传送的意思，读音【te li po t】[嘻嘻],看官们应该知道读啥子了吧
它可以将你写的代码传送到某一个地方
传送到哪一个地方呢？
传送到你标记的地方，比如说传送到body下，html下
官方说：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，
上面这一句话是说传送到除了app之外的地方。
也就是说不能够传送到app之内。【注意了】
点像哆啦A梦的“任意门”
主要运用在弹窗上，消息提示，这样的场景！
下面我们就来简单使用一下:
我们将弹窗组件移动到body下
场景描述
a-test组件中有b-test组件，b-test组件中有c-mask[弹窗组件]
我们点击按钮，将b-test组件中的组件c-mask[弹窗组件]移动到body下
容器下有a-test组件
<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>
a-test组件下有b-test组件
<template>
<div class="a-test" >
我是a-test组件
<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>
b-test组件下有c-mask[弹窗组件]组件
<template>
<div class="b-test">
我是b-test组件
<c-mask></c-mask>
</div>
</template>
<script>
import cmask from "./c-mask.vue"
export default {
components:{
'c-mask':cmask
},
}
</script>
c-mask[弹窗组件]组件移动到body下
<template>
<div>
<a-button type="primary" @click="openHander">open</a-button>
<!-- 将内容区域的代码移动到body下 -->
<teleport to='body'>
<div class="mask" v-if="showFlag">
<h1>对话框组件</h1>
<div>
我是内容哈哈
</div>
<a-button @click="openHander">关闭</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>
主要注意的地方
通过上面的小粒子，想必你已经看明白了。
需要注意的是不可以移动到#app之内
我们可以在index.html中创建id=myapp的容器
将它传送在myapp容器下，我们看一下
index.html 创建一个容器
<body>
<div id="app"></div>
//等会将会传送到这里哈
<div id="myapp"></div>
</body>
传送
<template>
<div>
<a-button type="primary" @click="openHander">open</a-button>
<!-- 将内容区域的代码移动到id=myapp下 -->
<teleport to='#myapp'>
<div class="mask" v-if="showFlag">
<h1>对话框组件</h1>
<div>
我是内容哈哈
</div>
<a-button @click="openHander">关闭</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>
