vue 3.0トランスポートドアteleport

まずコードを見ます.機能は簡単です.テンプレートにボタンがあります.ボタンをクリックして、モードウィンドウを表示します.

const app = Vue.createApp({
  data() {
    return {
      show: false,
    };
  },
  methods: {
    handleShowModal() {
      this.show = true;
    },
  },
  template: `
    

            
      
    
    
  `
}

モードウィンドウのスタイルは以下の通りです.

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: cadetblue;
}
.modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

全体のモードウィンドウは絶対位置を示しています.left、right、top、bottomは全部0に与えて、背景色は黒半透明です.私たちが期待する効果はボタンをクリックして、モードウィンドウが全ページをカバーします.
今私たちは実行していますが、実はモダリティウィンドウは#box要素だけをカバーしています.#box自体は絶対位置付けであり、モダリティウィンドウ要素は彼のサブノードですので、モダリティウィンドウは#box要素だけをカバーしています.
teleportを学ぶ前に、ルートノードでモードウィンドウを定義し、ビジネスコンポーネントで呼び出しを行います.しかし、このようにすると、コンポーネントとモダリティウィンドウの論理が亀裂感を生みます.何かの方法がありますか?私のモダリティウィンドウをこのコンポーネントに書いてもいいですが、本当にページに現れたら、要素に動的に挿入できます.実はあります.簡単な修正でtemplateテンプレートを作成すれば、この要求を実現できます.

template: `
    

              
        
            
    
                
    
`

私たちはteleport要素でmodalを包んで、属性to="body"を定義して、ページを実行します.domノードを確認すると、modal要素はすでにbodyの底に追加されていることが分かります.効果は以下の通りです.

--body
  --#root vue   
  --.modal     

他の場所に転送
私たちがmodalノードを他の位置に転送したいなら、そうしてもいいです.

このコードはmodal元素をid=appの要素に追加するということです.注意が必要です.ずっと言っていたのは です.もし、元の芫app内部に他のノードが存在していたら、modal元素はこれらのノードに追加されます.興味があれば、自分で試してみてもいいです.
コンポーネントと一緒に使う
実際には、コンポーネント上で使用されるのと普通のdom要素はあまり区別されていません.コンポーネント中のノードは、指定されたdomノード(bodyまたは指定ID)にレンダリングされます.

const app = Vue.createApp({
  ...
  template: `
    

            
      
         
       
    
  `
}
app.component('child-component',{
    props:['name']
    template: `
{{name}}
`
})

異なるノードにレンダリングされても、通常のサブアセンブリと同様に、親コンポーネントから送信されたデータを受信し、レンダリングノードの変化によって変化していない.
同じ目標に複数のteleportを使う

  
A


  
B

結果は以下の通りです

-- #modal
    -- A
    -- B

だから上で私はずっと強調しています.teleportを使うと、小包の要素を指定ノードに追加するので、上の二つのteleportは順番に〓modalに追加します.
締め括りをつける
teleportは論理的にこのコンポーネントに属し、技術的には他のノード(bodyまたは指定IDの要素)に移動します.最も一般的なシーンはフルスクリーンモードを含むコンポーネントを作成し、論理はコンポーネント内に存在しますが、cssスタイルに基づいて、彼をbody要素に移動させます.