vue3新特性teleport傳送原來這麼神奇
阿新 • • 發佈：2021-11-14
我對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>
出處：https://www.cnblogs.com/IwishIcould/
想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！
如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！
萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！
想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！
支付寶 微信 本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段宣告，在文章頁面明顯位置給出原文連線如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。