2023 Vue直播班筆記 - Teleport自訂元件生成位置

閱讀時間約 10 分鐘
此筆記僅以個人理解的方式記錄

前言

自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。


建置範例

App.vue 根元件組成為, #teleport-content + <router-view>

路徑設定為 "/" 時,App.vue 的 router-view 載入 index.vue ,並根據後續連接的路徑,對應渲染的子路由將組件 pageA.vue & pageB.vue 渲染在 index.vue的<router-view>上

// App.vue
<template>
<div class="my-5" id="teleport-content"></div>
<router-view></router-view>
</template>

<style scoped>
#teleport-content {
min-width: 500px;
height: 300px;
border: 1px solid black;
}
</style>
//index.vue
<template>
<ul class="nav py-5 justify-content-center">
<li class="nav-item me-3">
<router-link class="btn btn-danger" to="/pageA">pageA</router-link>
</li>
<li class="nav-item">
<router-link class="btn btn-primary" to="/pageB">pageB</router-link>
</li>
</ul>
<router-view></router-view>
</template>
raw-image



由此上述設定,我們可以在 "/" 時,利用按紐來改變我們的畫面,以下圖示為各路徑畫面。

raw-image
raw-image


這邊可以看到在 "/pageB" 時有一張貓咪卡片,因為 index.vue 內的 router-view 正渲染著 pageB.vue ,而自訂生成位置又是如何運作的呢?


我們一開始在 App.vue 根元件上有預留個長方形id="teleport-content"的空間,就是要來將​pageB.vue​內的貓咪卡片讓其展示在其中,然而這需求就得利用 teleport 來實現它。當路徑在 /pageB 時,對於 App.vue 來說我們的展示空間跟 pageB.vue 元件,都是處於 App.vue 元件內,因此程式碼會變成

<template>
<div class="my-5" id="teleport-content"></div>
<ul class="nav py-5 justify-content-center"> //App.vue router-view
<li class="nav-item me-3">
<router-link class="btn btn-danger" to="/pageA">pageA</router-link>
</li>
<li class="nav-item">
<router-link class="btn btn-primary" to="/pageB">pageB</router-link>
</li>
</ul>
<h1>Page B 分頁</h1> //index.vue router-view
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://storage.googleapis.com/www-cw-com-tw/article/201810/article-5bd182cf13ebb.jpg"
class="h-100 img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">貓咪</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</template>

<style scoped>
#teleport-content {
min-width: 500px;
height: 300px;
border: 1px solid black;
}
</style>


但是這時畫面會呈現貓咪卡片還是處於 pageB.vue 之內的情形

raw-image


這時就可以利用 <teleport></teleport> 來實現我們要的功能,只要將想要自訂生成的區塊框起來,並指定生成的位置,就可以達成效果了。

<template>
<div class="my-5" id="teleport-content"></div>
.
.(省略)
.
<h1>Page B 分頁</h1>
<teleport to="#teleport-content"> //teleport開始
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://storage.googleapis.com/www-cw-com-tw/article/201810/article-5bd182cf13ebb.jpg"
class="h-100 img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">貓咪</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</teleport> //teleport結束
</template>


加上去後就會看到貓咪卡片被加到 #teleport-content 展示空間上了。

raw-image


  • joker
  • 2024/03/15
3會員
19內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
閱讀心得:展現自我的生活態度|成熟大人的說話課我們每天都在說話,但說出的話合適嗎? Sunny最近讀完一本有關溝通的書籍。 這是由世紀奧美公關的創辦人「丁菱娟」所寫的書,書的全名《丁菱娟的成熟大人說話課:如何說,才能得體又不傷人?反擊時,如何堅定又有力量?任何情境都可用的38個溝通之道》。 會找這本書來看,主要是因為Sunny 近期發
Thumbnail
2024-07-10
防曬產品係數測試報告彙整(2024年)從2014年起,自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的,像是原本應該是人體測試的SPF與PA數值,實際上沒有做,只用機器測試的數據來充當,但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷,但多數廠商並沒有完整標示
Thumbnail
【程式學習日記】六角學院:2023 Vue 作品實戰班從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
Thumbnail
2024-05-11
Vue 泛型元件,讓 TypeScript 更精確大家好,我是鱈魚。(^∀^●)ノシ Vue 3.3 終於新增了泛型元件(Generic Component),這讓我們可以在 TypeScript 環境中得到更準確的型別提示。( •̀ ω •́ )✧ 讓我們一起來看看吧!
Thumbnail
2024-04-17
Vue 程式札記 : emit 事件發射組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射(emit)的機制,讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射(emit)機制,並通過實際範例演示其用法。
Thumbnail
2024-03-27
Vue 程式札記 : Props 組件傳遞資料在 Vue 中,組件是構建應用程式的基本單位,而 props 是組件間傳遞資料的主要方式之一,本文將介紹 Vue 中的 props,並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
Thumbnail
2024-03-21
Vue 程式札記 : 指令 v-bindv-bind 指令是最常用的指令之一,它用於將資料綁定到 HTML 屬性。本文將介v-bindnd指令的使用方法,並透過實際範例幫助你理解v-bindbind 指令。
Thumbnail
2024-03-15
Vue 程式札記 : 指令 v-modelv-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
Thumbnail
2024-03-11
Vue 程式札記 : 指令 v-for在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
Thumbnail
2024-03-08
Vue 程式札記 : 指令 v-if、v-show指令(Directives)是 Vue 中一個重要的概念,它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令:v-if 和 v-show,並通過實際範例來解釋它們的不同之處和使用場景。
Thumbnail
2024-03-06
2023-Vue六角直撥班心得為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
Thumbnail
2023-03-19