完美的世界 1993 电影,有声小说,大主宰

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Vue3值得注意的新特性之——teleport

前提

Vue鼓勵我們通過將UI和相關行為封裝到組件中來構建UI。我們可以將它們嵌套在另一個內部，來構建一個組成應用程序UI樹。

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

Teleport提供了一種干凈的方法，允許我們控制在DOM中哪個父節(jié)點下渲染HTML，而不必求助于全局狀態(tài)或將其拆分為兩個組件。

 
 
 
 
  
  
  
  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。

這也意味著來自父組件的注入按預期工作，并且子組件將嵌套在Vue Devtools中的父組件之下，部署放在實際內容移動到的位置。

在同一目標上使用多個teleport

一個常見的用例場景是一個可重用的組件，他可能同時有多個實例處于活動狀態(tài)。對于這種情況，多個組件可以將其內容掛載到同一個目標元素。順序將是一個簡單的追加——稍后掛載將位于目標元素中較早的掛載之后。

使用

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

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

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

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

當前標題：Vue3值得注意的新特性之——teleport
本文網(wǎng)址：http://fisionsoft.com.cn/article/coojdgj.html

新聞中心

前提

使用

Root instance

This is a parent component

使用

其他資訊