跳至主要内容

[Vue] 進階API-Teleport

TL;DR​

可以使用Refs快速取出需要的DOM元素

參考資料​

相關連結​

基本語法​

在使用teleport時，一定要使用teleport標籤:

並且搭配to="{target}" 去指定要傳送的位址：<teleport to="{target}">

e.g:

html(#app)
<div id="app">
  <div id="target"></div>
  <card></card>
</div>
const app = Vue.createApp({
})
app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文',
      toggle: false
    }
  },
  template: `
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">{{ title }}</h5>
        <p class="card-text">{{ content }}</p>
        <button type="button" @click="toggle = !toggle">切換元素顯示</button>
      </div>
    </div>
    <teleport to="#target">
      <div v-if="toggle" class="alert alert-danger" >被招喚的元素</div>
    </teleport>
  `,
});

app.mount('#app');
teleport限制

在使用teleport的時候，目標位置需要為已經可以取到DOM才可以傳送。

所以如果html順序執行下來，因為目前的元件還沒有完全掛載，下一個元件目前是不存在的。

如果這時候使用<teleport to="nextComponentDOM">則會沒有辦法正確傳送

應用​

更改網頁title​

<div id="app">
  <div class="p-5">
    <h1>會被更改的標題</h1>
    <h3>實用技巧（取代標題、多個）</h3>
    <new-title></new-title>
  </div>
</div>
info

受限於環境，無法於codepen展示

運作​

實際上在使用teleport時會使用append的方法將<teleport></teleport>內的內容生成到目標位置的子層last-child。

e.g:

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染結果為

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>