正文

通常，當我們在 Vue 中創(chuàng)建組件時，它們出現(xiàn)在我們期望的 DOM 結(jié)構(gòu)中。但是，有時我們并不希望如此。一個很好的例子就是模態(tài)框——通常，模態(tài)框應(yīng)該出現(xiàn)在頁面上所有內(nèi)容的頂部——所以如果我們在邏輯上在具體的組件中創(chuàng)建它，它可能會出現(xiàn)在某些 HTML 元素后面或需要一些奇怪的 CSS 樣式讓它達到頂部。

幸運的是，在 Vue 中有一種簡單的方法可以解決這個問題，稱為. 標簽允許我們在組件中定義一些東西，然后在代碼中我們想要的任何地方“傳送”它。讓我們看看它是如何工作的。

Teleport 在 Vue 中的使用

假設(shè)我們在 Vue 中有一個名為Modal.vue的簡單組件，其中包含一個模態(tài)框。它看起來是這樣的：

<script>
export default {
    data() {
        return {
            display: false
        }
    }
}
</script>
<template>
    <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button>
    <div class="modal" v-if="display">
        My Modal
    </div>
</template>

在我們的解構(gòu)中，模態(tài)框處于非常深層的結(jié)構(gòu)中：

由于Modal.vue在我們的結(jié)構(gòu)中如此之深，它可能不會像我們想要的那樣出現(xiàn)在我們其他內(nèi)容的頂部。因此，理想情況下，我們希望它成為body標簽的直接子代。

使用，我們可以調(diào)整我們的組件以將其“傳送”為body標簽的直接子代，如下所示：

<script>
export default {
    data() {
        return {
            display: false
        }
    }
}
</script>
<template>
    <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button>
    <Teleport to="body">
        <div class="modal" v-if="display">
            My Modal
        </div>
    </Teleport>
</template>

Teleport的to屬性應(yīng)該是一個有效的 CSS 選擇器?，F(xiàn)在我們的.modaldiv 將被傳送為 body 的直接子代，所以它總是出現(xiàn)在頂部，而不是深深地嵌套在我們的 Vue 結(jié)構(gòu)中。

禁用 Teleport 標簽

我們可以使用:disabled屬性基于某些邏輯禁用Teleport標簽。例如，我們可以myToggle使用以下代碼檢查設(shè)置為 true 的值：

<Teleport :disabled="myToggle"></Teleport>

上面，如果myToggle設(shè)置為true，則Teleport根本不起作用，這意味著我們只能在需要時啟用它。因此，Teleport是 Vue 中一個非常有用的標簽，用于調(diào)整我們在何時何地看到某些內(nèi)容。在同一個 Vue 模板中使用多個Teleport標簽也是可以的。

以上就是Vue中使用Teleport的方法示例的詳細內(nèi)容，更多關(guān)于Vue使用Teleport的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論