Vue3中teleport新特性的示例分析

Vue3中teleport新特性的示例分析，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

成都創(chuàng)新互聯(lián)公司，為您提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對(duì)服務(wù)木屋等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

Vue鼓勵(lì)我們通過將UI和相關(guān)行為封裝到組件中來構(gòu)建UI。我們可以將它們嵌套在另一個(gè)內(nèi)部，來構(gòu)建一個(gè)組成應(yīng)用程序UI樹。

然而，有時(shí)組件模板的一部分邏輯上屬于該組件，而從技術(shù)角度來看，最好將模板的這一部分移動(dòng)到DOM中Vue app之外的其他位置。

Teleport提供了一種干凈的方法，允許我們控制在DOM中哪個(gè)父節(jié)點(diǎn)下渲染HTML，而不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€(gè)組件。

app.component('modal-button', {   template: `              Open full screen modal! (With teleport!)                                      I'm a teleported modal!            (My parent is "body")                        Close

`, data() { return { modalOpen: false } } })

使用

與Vue compoents一起使用

如果包含Vue組件，則它仍將是父組件的邏輯子組件：

const app = Vue.createApp({   template: `     Root instance
        ` })  app.component('parent-component', {   template: `     This is a parent component
                    ` })  app.component('child-component', {   props: ['name'],   template: `     Hello, {{ name }}
   ` })

在這種情況下，即使在不同地方渲染child-compoents，它仍將是parent-component的子集，并將從中接受name prop。

這也意味著來自父組件的注入按預(yù)期工作，并且子組件將嵌套在Vue Devtools中的父組件之下，部署放在實(shí)際內(nèi)容移動(dòng)到的位置。

在同一目標(biāo)上使用多個(gè)teleport

一個(gè)常見的用例場(chǎng)景是一個(gè)可重用的組件，他可能同時(shí)有多個(gè)實(shí)例處于活動(dòng)狀態(tài)。對(duì)于這種情況，多個(gè)組件可以將其內(nèi)容掛載到同一個(gè)目標(biāo)元素。順序?qū)⑹且粋€(gè)簡(jiǎn)單的追加——稍后掛載將位于目標(biāo)元素中較早的掛載之后。

使用

to：String。需要prop，必須是有效的查詢選擇器或HTMLElement(如果在瀏覽器環(huán)境中使用)。指定將在其移動(dòng)內(nèi)容的目標(biāo)元素。

disabled: boolean。此可選屬性可用于禁用的功能，這意味著其插槽內(nèi)容不會(huì)移動(dòng)到任何位置。而是在您在周圍父組件中指定了的位置渲染。

值得注意的是，這將移動(dòng)實(shí)際的DOM節(jié)點(diǎn)，而不是被銷毀和重新創(chuàng)建，而且它還將保持

任何組件實(shí)例的活動(dòng)狀態(tài)。所有有狀態(tài)的HTML元素（即播放的視頻）都將保持其狀態(tài)。

關(guān)于Vue3中teleport新特性的示例分析問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

標(biāo)題名稱：Vue3中teleport新特性的示例分析
本文路徑：http://weahome.cn/article/jioegs.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Vue3中teleport新特性的示例分析

使用

Root instance

This is a parent component

使用

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管