# Teleport 自訂元件生成位置 (5-2)
###### tags: `Vue`、`5. 進階Api`
2022.3.7

**  可以讓元件裡的HTML，透過指向生成位置方式，渲染在不同位置。
限制：如果指定位置在召喚元件ＤＯＭ後，會出現錯誤，因為程式碼還沒執行到後面。**

範例 : 讓元件渲染位置，與原本元件template不同。

<div id="app" >
    <div id = "one"></div>
    <div id = "two"></div>
    <div id = "three"></div>
    <oldmoon></oldmoon>
</div>

<script>

    const app = Vue.createApp({
        data(){
            return{
                text:'使用teleport將元件資料倒至呈現'
            }
        }
    });

    app.component('oldmoon',{
        template:`<teleport to = "#three"> <h1> 第三行 </h1> </teleport>
                  <teleport to = "#two"> <h1> 第二行 </h1> </teleport>
                  <teleport to = "#one"> <h1> 第一行 </h1> </teleport>`});

    app.mount('#app');

</script>