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

Vuejs で 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>

095a8c77e9bc5f13289f43baf6c8bdc1

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

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>

Note095a8c77e9bc5f13289f43baf6c8bdc1

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

to ターゲットは DOM

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

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

次のコードは機能しません<pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;div&gt; &lt;Teleport to=&quot;.content&quot;&gt; &lt;div&gt;我是头部的内容&lt;/div&gt; &lt;/Teleport&gt; &lt;/div&gt; &lt;div&gt; 底部内容 &lt;div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script setup&gt; &lt;/script&gt; &lt;style&gt; h1 { color: red; } &lt;/style&gt;</pre>03-知っておくべきこと

teleport

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

095a8c77e9bc5f13289f43baf6c8bdc1

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

6c123bcf29012c05eda065ba23259dcb

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

props

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

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

04-如何禁用 Teleport

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

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

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

05-多个 Teleport 共享目标时

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

比如下面这样的用例

<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 サイトの他の関連記事を参照してください。