簡介

<Teleport>是 vue3 才出的，可以將元素傳送到指定元素，主要是希望解決 CSS 問題(例如: 用到 transform 會讓 position: fixed 失效)

<Teleport>既能將元素放在同個 vue 檔案方便傳遞資料又能解決 CSS 問題，趕緊認識一下

vue官方文件:
https://cn.vuejs.org/guide/built-ins/teleport.html
React也有類似的功能:
https://zh-hans.reactjs.org/docs/portals.html

簡易範例

從下面這個例子可以看到中間的元素被傳到 body 了

動手玩玩看 Vue SFC Playground

<Teleport> or <teleport> 都可以運作

<template>
  <div @click="handleDivClick">
    start
    <div>1</div>
    <teleport to="body">
      <div class="portal">2</div>
    </teleport>
    <div>3</div>
    end
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleDivClick() {
      alert("div click");
    },
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
.portal{
  border: 3px solid red;
}
</style>

開啟檢查會發現vue有邦我們加上
<!--teleport start-->
<!--teleport end-->

屬性

teleport 有2個屬性

1. disabled
   • 是否關閉傳送功能
     • true
     • false 預設
2. to
   • query selector

     • (抓id)

     • . (抓class)
     • [] (抓attr=屬性)
     • "body"

參考官方:
https://cn.vuejs.org/api/built-in-components.html#teleport

參考文章

竹白:
https://chupai.github.io/posts/2104/teleport/

yachen:
https://yachen168.github.io/article/composition-api-teleport.html

Alysa Chan:
https://ithelp.ithome.com.tw/articles/10274013