Vue で Teleport コンポーネントを使用する方法の詳細な説明-Vue.js-php.cn

Vuejs で Teleport コンポーネントを使用するにはどうすればよいですか?次の記事では、Vue で Teleport コンポーネントを使用する方法を説明します。

Vue で Teleport コンポーネントを使用する方法の詳細な説明

比較的複雑な DOM 構造と深い階層ネストを持つコンポーネントでは、一部のロジックは、対応するモジュールビジネスに基づいて処理する必要があります。現在のコンポーネント

に属していますが、ページアプリケーション全体から見ると、vue アプリケーション全体の外側の DOM でレンダリングされる必要があり、コンポーネントに影響を与えることはできません。コンポーネントの構造では、要素にバインドされたイベントは、同じコンポーネント内で特定の場所で制御される特定の

DOM

要素構造と一定の相関関係を維持します。 [関連する推奨事項:

vuejs ビデオチュートリアル

、Web フロントエンド開発 ] ただし、一部の DOM 構造を意図的に分離する必要はありません。コンポーネント、モーダルボックスをトリガーするボタン、およびモーダルボックス自体は同じコンポーネント内にあります。

これらは両方ともコンポーネントのスイッチ状態に関連付けられているため、モーダルボックスとボタンはアプリケーション内で一緒にレンダリングされます。 DOM 構造が非常に深い場合、モーダルボックスの CSS レイアウト位置を制御することは非常に困難になります。

このようなシナリオと困難を考慮して、Vue

Teleport

コンポーネントを公式に提供すると、この問題は非常にうまく解決できるため、開発者は DOM##01 の構造について心配する必要がなくなります。コンポーネントのコンポーネント階層非常に奥が深い例: 親コンポーネントと子コンポーネントの 2 つのコンポーネントがあります。子孫コンポーネントにモーダルボックスをポップアップするボタンを追加し、中央に垂直方向と水平方向に表示します。

以下に示すように、親コンポーネント以下に示すように

App.vue

<template>
    <div class="App">
        我是父组件
        <Child />
    </div>
</template>
<script setup>
    import Child from "./Child.vue"
</script>
<style>
.App {
    width: 400px;
    height: 400px;
    background:red;
}
</style>

ログイン後にコピー

以下は

Child コンポーネントです。サンプルコードは次のとおりです。Child.vue

、Descendants)コンポーネントにボタンを追加し、ボタンをクリックすると、ポップアップボックスがポップアップ表示され、ページの中央に水平方向と垂直方向に表示されます。 ##

<template>
    <div class="child">
      <p>我是子组件</p>
        <button @click="isModel=true">打开模态框</button>
        <div class="mask-dialog" v-if="isModel">
             <div class="box">
                  <h2>我是标题</h2>
                  <div>我是弹框内容</div>
                  <div>
                      <button @click="isModel=false">关闭</button>
                  </div>
             </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
    width: 300px;
    height:300px;
    background:green;
}
/**灰色遮罩层 */
  .mask-dialog {
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5)
  }
  
  .box {
    width: 200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:pink;
    text-align:center;
  }
</style>

ログイン後にコピー

上記のサブコンポーネントには、現在のコンポーネントを開くトリガーとなる button ボタンがあります。モーダルボックスには、ポップアップボックスの表示と非表示を制御するロジックが含まれています。ネストされたコンポーネントが深くて複雑な場合親要素に位置決めがある場合、子要素の位置を制御するときに、

css

の transform または

position:absolute

を使用してオブジェクトの変更を参照すると、レイアウト構造が破壊され、いくつかの cssstyles## が表示されます。#コントロールの問題を解決するのは非常に困難です この Teleport コンポーネントは、この種の問題を解決するためのものです。コンポーネントの外に出ることとは関係なく、現在のコンポーネントレイアウト構造の影響を受けずに、 DOM

構造フラグメントを指定できます

Teleport

<template>
    <div class="child">
      <p>我是子组件</p>
        <button @click="isModel=true">打开模态框</button>
        <Teleport to="body">
            <div class="mask-dialog" v-if="isModel">
                 <div class="box">
                      <h2>我是标题1</h2>
                      <div>我是弹框内容</div>
                      <div>
                          <button @click="isModel=false">关闭</button>
                      </div>
                 </div>
            </div>
        </Teleport>  
    </div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
    width: 300px;
    height:300px;
    background:green;
}
/**灰色遮罩层 */
  .mask-dialog {
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5)
  }
  
  .box {
    width: 200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:pink;
    text-align:center;
  }
</style>

ログイン後にコピー

による変更後送信先を指定する

to prop を受け取ります。 to

の値は、

CSS セレクター文字列または id、または DOM 要素オブジェクトにすることができます。このコードの機能は、Vue に次のテンプレートフラグメントを body tag

<Teleport to="#some-id">html结构代码</Teleport>
<Teleport to=".some-class">html结构代码</Teleport>
<Teleport to="body">html结构代码</Teleport>
<Teleport to="html">html结构代码</Teleport>

ログイン後にコピー

02-Teleport コンポーネントに送信するように指示することです。 Vue

 は公式に提供されている組み込みコンポーネントで、コンポーネント内のテンプレートの一部をコンポーネントの

DOM

構造の外層の場所に「転送」できます。つまり、コンポーネントの

html

構造を指定された場所に移動できるテクノロジーです。

<teleport to="移动到指定的位置,可以是html,body,或id,class">
   里面是Html结构模板内容
</teleport>

ログイン後にコピー

Note<Teleport>

マウントする場合、転送された

to ターゲットは DOM

にすでに存在している必要があります。理想的には、これは

Vue アプリケーション DOM ツリー全体の外側の要素である必要があります。ターゲット要素が Vue によってもレンダリングされる場合は、<Teleport> #指定されたテンプレートを配置する ## をマウントする前に、必ず要素 をマウントする必要があります。 #html ページ上の指定された場所にあります。これは条件付きであり、任意に転送することはできませんコンポーネントをインストールする前に、ターゲット要素が存在する必要があります。つまり、コンポーネント自体によってターゲットをレンダリングすることはできません。理想的には、Vue コンポーネントツリー全体の外側に配置する必要があります。

次のコードは機能しません<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><template> <div> <Teleport to=".content"> <div>我是头部的内容</div> </Teleport> </div> <div> 底部内容 <div></div> </div> </template> <script setup> </script> <style> h1 { color: red; } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>03-知っておくべきこと

teleport

はレンダリングされた DOM を変更するだけです構造、コンポーネント間の論理関係には影響しません。つまり、

にコンポーネントが含まれている場合、そのコンポーネントは、

を使用するコンポーネントとの論理的な親子関係を常に維持します。受信した

props

とトリガーされたイベントも通常どおりに機能します。 <p>这也意味着来自父组件的注入也会按预期工作，子组件将在 <code>Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方

位置移动了,提现在结构模板上,但是数据逻辑依旧存在关联的

04-如何禁用 Teleport

在某些场景下可能需要视情况禁用 <Teleport>。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 <Teleport> 动态地传入一个 disabled prop 来处理这两种不同情况

<Teleport :disabled="isMobile">
  ...
</Teleport>

ログイン後にコピー

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新

05-多个 Teleport 共享目标时

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上

比如下面这样的用例

<Teleport to=".content">
  <div>A</div>
</Teleport>
<Teleport to=".content">
  <div>B</div>
</Teleport>

ログイン後にコピー

渲染的结果为

<div class="content">
  <div>A</div>
  <div>B</div>
</div>

ログイン後にコピー

总结

这个teleport组件在实际开发中还是很实用的,能够解决当组件嵌套层级很深,而后代组件中的模板,想要脱离当前组件结构,解决css布局层面的干扰,那就可以用这个teleport组件

（学习视频分享：vuejs入门教程、编程基础视频）

以上がVue で Teleport コンポーネントを使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。