日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
Vue3值得注意的新特性之——teleport

前提

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

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

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

 
 
 
 
    
  
  
  
  
  1. app.component('modal-button', {
    2. 
  
  
  
  
  2.   template: `
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.         Open full screen modal! (With teleport!)
    5. 
  
  
  
  
  5.     
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.       
    9. 
  
  
  
  
  9.         
    10. 
  
  
  
  
  10.           I'm a teleported modal! 
    11. 
  
  
  
  
  11.           (My parent is "body")
    12. 
  
  
  
  
  12.           
    13. 
  
  
  
  
  13.             Close
    14. 
  
  
  
  
  14.           
    15. 
  
  
  
  
  15.         
  •       
  •     
  •   `,
  •   data() {
  •     return { 
  •       modalOpen: false
  •     }
  •   }
  • })

    • 使用

    與Vue compoents一起使用

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

     
 
 
 
      
  
  
  
  
    1. const app = Vue.createApp({
      2. 
  
  
  
  
    2.   template: `
      3. 
  
  
  
  
    3.     
      Root instance
      4. 
  
  
  
  
    4.     
      5. 
  
  
  
  
    5.   `
      6. 
  
  
  
  
    6. })
      7. 
  
  
  
  
    7. 
  
  
  
  
    8. app.component('parent-component', {
      9. 
  
  
  
  
    9.   template: `
      10. 
  
  
  
  
    10.     
      This is a parent component
      11. 
  
  
  
  
    11.     
      12. 
  
  
  
  
    12.       
      13. 
  
  
  
  
    13.     
      14. 
  
  
  
  
    14.   `
      15. 
  
  
  
  
    15. })
      16. 
  
  
  
  
    16. 
  
  
  
  
    17. app.component('child-component', {
      18. 
  
  
  
  
    18.   props: ['name'],
      19. 
  
  
  
  
    19.   template: `
      20. 
  
  
  
  
    20.     
      Hello, {{ name }}
      21. 
  
  
  
  
    21.   `
      22. 
  
  
  
  
    22. })
      23.

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

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

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      A
      3. 
  
  
  
  
    3. 
  
  
  
  
      5. 
  
  
  
  
    5.   
      B
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. 
  
  
  
  
      9. 
  
  
  
  
      10. 
  
  
  
  
    10.   
      A
      11. 
  
  
  
  
    11.   
      B
      12.

    使用

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
      3. 
  
  
  
  
      4. 
  
  
  
  
      5. 
  
  
  
  
    5. 
  
  
  
  
      7. 
  
  
  
  
      8. 
  
  
  
  
      9.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.

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

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


    網(wǎng)頁(yè)名稱(chēng)：Vue3值得注意的新特性之——teleport
    本文網(wǎng)址：http://www.5511xx.com/article/coojdgj.html