Vue3中的Portal——Teleport

對於使用 React 的前端開發者來說，portals傳送門應該是比較熟悉的，能夠將節點渲染到父組件以外的節點上。

這種讓節點任意渲染到其他位置的功能在開發自定義組件的時候非常的實用，特別是一些模態的組件或者彈出層的組件，能夠將部分內容掛載到body上使得邏輯更清晰，並能使其不受父元素影響，使得父元素的樣式調整更靈活。

但是相似的功能在 Vue 中一直是沒有的，甚至需要第三方的庫來實現。但是 Vue3 中我們迎來了一個新的內置組件Teleport—— 我稱為傳送面板 (誤

Teleport online！

用法#

作為內置組件Teleport和Transition、KeepAlive一樣，我們可以在任意 Vue3 項目中使用，如下。

const app = Vue.createApp({
  name: 'test',
  template: `
    <div class="text">
      <div>Hello World</div>
      <teleport to="body">
        <span>this is teleport</span>
      </teleport>
    </div>
  `,
})
const vm = app.mount('#app')

會渲染成如下結構

<body>
  <div id="app" data-v-app="">
    <div class="text">
      <div>Hello World</div>
      <!--teleport start-->
      <!--teleport end-->
    </div>
  </div>

  <span>this is teleport</span>
</body>

組件 props#

Teleport組件只有兩個 props——to、disabled

to 必須，用於指定查詢選擇器或 HTMLElement，而且此屬性能夠被:、v-bind修飾，對參數的改變會導致傳送的目標變化，而且是對真實的 Dom 進行移動，所以元素的狀態也會被保存

disabled 可選，用於禁用功能，為 true 則意味著並不移動內容至 to 參數指定的位置；通過控制 disabled 屬性可以靈活的操作其默認插槽內容，而且也如同 to 被動態更改一樣是對真實的 Dom 進行移動

更詳細的用途#

其實如同Portal一樣，很多用途都是相同的，主要是Teleport更好控制，使用更適合 vue 的模板語法。

通過這種能移動內容的功能我們能夠更容易封裝能夠被統一控制的 Popover 類型的組件，將組件內容移動到 body 節點下能夠更好的控制樣式還有不會對原有的父元素產生不明的影響。