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

此筆記僅以個人理解的方式記錄

前言

自訂元件生成位置顧名思義就是可以指定部分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