此筆記僅以個人理解的方式記錄
前言
自訂元件生成位置顧名思義就是可以指定部分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>
由此上述設定，我們可以在 "/" 時，利用按紐來改變我們的畫面，以下圖示為各路徑畫面。
這邊可以看到在 "/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 之內的情形
這時就可以利用 <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 展示空間上了。
- joker
- 2024/03/15
