Vue中如何使用Teleport組件
這篇文章主要介紹“Vue中如何使用Teleport組件”，在日常操作中，相信很多人在Vue中如何使用Teleport組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”Vue中如何使用Teleport組件”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)公司堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā)，微信小程序定制開發(fā)，軟件定制設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
01-組件套組件層次結(jié)構(gòu)很深時(shí)
比如:現(xiàn)在有兩個(gè)組件,父組件,子組件,在后代組件內(nèi),添加一個(gè)按鈕,彈出一個(gè)模態(tài)框,讓它在頁面垂直水平居中顯示
如下所示,父組件如下所示App.vue
<template>
<div class="App">
我是父組件
<Child />
</div>
</template>
<script setup>
import Child from "./Child.vue"
</script>
<style>
.App {
width: 400px;
height: 400px;
background:red;
}
</style>
如下是Child組件,示例代碼如下所示Child.vue,我們需要在孫(后代)組件,添加一個(gè)按鈕,點(diǎn)擊按鈕,彈出一個(gè)彈框,水平垂直居中顯示在頁面中央
<template>
<div class="child">
<p>我是子組件</p>
<button @click="isModel=true">打開模態(tài)框</button>
<div class="mask-dialog" v-if="isModel">
<div class="box">
<h3>我是標(biāo)題</h3>
<div>我是彈框內(nèi)容</div>
<div>
<button @click="isModel=false">關(guān)閉</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
width: 300px;
height:300px;
background:green;
}
/**灰色遮罩層 */
.mask-dialog {
width: 100%;
height:100%;
position:absolute;
left:0;
top:0;
background:rgba(0,0,0,0.5)
}
.box {
width: 200px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:pink;
text-align:center;
}
</style>
上面的子組件中有一個(gè)button按鈕來觸發(fā)打開當(dāng)前組件的模態(tài)框,里面存在著控制彈框的顯示和隱藏的邏輯,當(dāng)嵌套的組件比較深,復(fù)雜時(shí)
如果父級(jí)元素存在定位,那在控制子元素的位置時(shí),用css的transform或者position:absolute,參照對(duì)象的變更,會(huì)破壞布局結(jié)構(gòu),會(huì)出現(xiàn)一些css樣式
控制的問題,解決起來會(huì)非常的痛苦
那這個(gè)Teleport組件就是為了解決這類問題,可以將指定的DOM結(jié)構(gòu)片段,獨(dú)立于到組件外面去,不受當(dāng)前組件布局結(jié)構(gòu)的影響
經(jīng)過Teleport的修改后
<template>
<div class="child">
<p>我是子組件</p>
<button @click="isModel=true">打開模態(tài)框</button>
<Teleport to="body">
<div class="mask-dialog" v-if="isModel">
<div class="box">
<h3>我是標(biāo)題1</h3>
<div>我是彈框內(nèi)容</div>
<div>
<button @click="isModel=false">關(guān)閉</button>
</div>
</div>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
width: 300px;
height:300px;
background:green;
}
/**灰色遮罩層 */
.mask-dialog {
width: 100%;
height:100%;
position:absolute;
left:0;
top:0;
background:rgba(0,0,0,0.5)
}
.box {
width: 200px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:pink;
text-align:center;
}
</style>
<Teleport>接收一個(gè) to prop 來指定傳送的目標(biāo)。to 的值可以是一個(gè) CSS 選擇器字符串，或id,也可以是一個(gè) DOM 元素對(duì)象。這段代碼的作用就是告訴 Vue把以下模板片段傳送到 body 標(biāo)簽下
<Teleport to="#some-id">html結(jié)構(gòu)代碼</Teleport>
<Teleport to=".some-class">html結(jié)構(gòu)代碼</Teleport>
<Teleport to="body">html結(jié)構(gòu)代碼</Teleport>
<Teleport to="html">html結(jié)構(gòu)代碼</Teleport>
02-Teleport組件
它是Vue官方提供的一個(gè)內(nèi)置組件，它可以將一個(gè)組件內(nèi)部的一部分模板“傳送”到該組件的 DOM 結(jié)構(gòu)外層的位置去
也就是一種能夠?qū)⑽覀兊慕M件html結(jié)構(gòu)移動(dòng)到指定位置的技術(shù)
<teleport to="移動(dòng)到指定的位置,可以是html,body,或id,class">
里面是Html結(jié)構(gòu)模板內(nèi)容
</teleport>
注意
<Teleport> 掛載時(shí)，傳送的 to 目標(biāo)必須已經(jīng)存在于DOM中。理想情況下，這應(yīng)該是整個(gè) Vue 應(yīng)用 DOM 樹外部的一個(gè)元素。如果目標(biāo)元素也是由 Vue 渲染的，你需要確保在掛載 <Teleport> 之前先掛載該元素
這個(gè)teleport將指定的模板html,放置到頁面當(dāng)中指定的位置處,它是有條件的,不是可以任意傳送的
在安裝組件之前，目標(biāo)元素必須存在,即,目標(biāo)不能由組件本身呈現(xiàn)，理想情況下應(yīng)該位于整個(gè)Vue組件樹之外。
如下代碼是不行的
<template>
<div>
<Teleport to=".content">
<div>我是頭部的內(nèi)容</div>
</Teleport>
</div>
<div>
底部內(nèi)容
<div></div>
</div>
</template>
<script setup>
</script>
<style>
h2 {
color: red;
}
</style>
03-需要知道的
teleport只是改變了渲染的 DOM 結(jié)構(gòu)，它不會(huì)影響組件間的邏輯關(guān)系。也就是說，如果 <Teleport> 包含了一個(gè)組件，那么該組件始終和這個(gè)使用了 <teleport> 的組件保持邏輯上的父子關(guān)系。傳入的 props 和觸發(fā)的事件也會(huì)照常工作。
這也意味著來自父組件的注入也會(huì)按預(yù)期工作，子組件將在 Vue Devtools 中嵌套在父級(jí)組件下面，而不是放在實(shí)際內(nèi)容移動(dòng)到的地方
位置移動(dòng)了,提現(xiàn)在結(jié)構(gòu)模板上,但是數(shù)據(jù)邏輯依舊存在關(guān)聯(lián)的
04-如何禁用 Teleport
在某些場景下可能需要視情況禁用 <Teleport>。舉例來說，我們想要在桌面端將一個(gè)組件當(dāng)做浮層來渲染，但在移動(dòng)端則當(dāng)作行內(nèi)組件。我們可以通過對(duì) <Teleport> 動(dòng)態(tài)地傳入一個(gè) disabled prop 來處理這兩種不同情況
<Teleport :disabled="isMobile">
...
</Teleport>
這里的 isMobile 狀態(tài)可以根據(jù) CSS media query 的不同結(jié)果動(dòng)態(tài)地更新
05-多個(gè) Teleport 共享目標(biāo)時(shí)
一個(gè)可重用的模態(tài)框組件可能同時(shí)存在多個(gè)實(shí)例。對(duì)于此類場景，多個(gè) <Teleport> 組件可以將其內(nèi)容掛載在同一個(gè)目標(biāo)元素上，而順序就是簡單的順次追加，后掛載的將排在目標(biāo)元素下更后面的位置上
比如下面這樣的用例
<Teleport to=".content">
<div>A</div>
</Teleport>
<Teleport to=".content">
<div>B</div>
</Teleport>
渲染的結(jié)果為
<div class="content">
<div>A</div>
<div>B</div>
</div>
到此，關(guān)于“Vue中如何使用Teleport組件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
標(biāo)題名稱：Vue中如何使用Teleport組件
分享網(wǎng)址：http://muchs.cn/article30/pppepo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、、標(biāo)簽優(yōu)化、云服務(wù)器、動(dòng)態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 做開發(fā)微信小程序的五個(gè)理由 2022-11-11
- 微信小程序歐美火爆：日活猛增200％ 2022-11-09
- 百度智能小程序與微信小程序有什么不一樣？一張圖告訴你真像！ 2014-08-07
- 微信小程序開發(fā)有必要嗎？微信小程序如何實(shí)現(xiàn)盈利變現(xiàn)？ 2016-11-07
- 微信小程序應(yīng)該怎樣去設(shè)計(jì)開發(fā) 2022-08-10
- 企業(yè)想做微信小程序之前，必須要了解清楚？ 2021-06-07
- 選擇微信小程序開發(fā)定制公司的注意事項(xiàng) 2022-07-18
- 微信小程序能為商家?guī)硎裁矗?/a> 2023-03-04
- 微信小程序開發(fā)對(duì)線下實(shí)體店有何幫助？ 2022-10-31
- 公眾號(hào)商城與微信小程序商城引流的最大差別 2021-02-14
- 微信小程序開發(fā)的必要性 2021-01-30
- 如何利用微信小程序做微信營銷? 2015-08-04