Vue3 Teleport 將元件指定位置

範例:

modal彈跳視窗

沒有Teleport前:

因為觸發Model的按鈕通常會在內層，但是彈跳的視窗應該是要對應整個外層置中。

Teleport用途:

可以指定元件內某些區塊的傳送位置。

<body>
    <div>
        <modal-button></modal-button>
    </div>
<body>

app.component('modal-button',{
    template:`
        <button @click="modal-open = true">
            open full screen modal!
        </button>

        //下面是modal內容
        //運用teleport指定位置
        <teleport to="body">
            <div v-if="modalOpen" class="modal">
                <div>
                    modal content
                    <button @click="modalOpen = false"> Close </button>
                </div>
            </div>
       <teleport>
    `,
    data(){
     return{
         modalOpen: false
     }
    }
})