Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

序文:

Vue 3.0主に以下のシナリオを解決するために使用される組み込みコンポーネントteleportが追加されました。

コンポーネントのテンプレートの一部が論理的にはそのコンポーネントに属している場合もありますが、技術的な観点からは、テンプレートのこの部分を Vue アプリ外のDOM内の別の場所に移動する方が適切Vue app

シナリオ例:クリックするとモーダルダイアログボックスを開くButton

このモーダル ダイアログ ボックスのビジネス ロジックの場所は間違いなくこのButtonに属しますが、 DOM構造によれば、モーダル ダイアログ ボックスの実際の場所はアプリケーション全体の中央にある必要があります。

これにより問題が発生します。コンポーネントの論理的な位置がDOM位置と同じ場所ではありません。

これまでのVue2慣例によれば、ダイアログ ボックスは通常position: fixed ; などの CSS プロパティを使用してアプリケーションの中央に配置されます。これは最後の手段です。次にteleportの基本的な使用方法を示します。

1. テレポートの使用

使い方は非常に簡単です。コンポーネントを目的の位置にレンダリングするには、to 属性を使用するだけです。

// body タグにレンダリングします <teleport to="body">
  <div class="modal">
    私はテレポートしたモーダルです! 
  </div>
</テレポート>

以下も使用できます:

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />


有効なクエリセレクターまたはHTMLElement
である必要がありますHTMLElement

さらに遠く

2. モーダルダイアログコンポーネントを完成させる

では、標準のモーダルダイアログボックスをカプセル化してみましょう

<テンプレート>
  <テレポート先="body">
    <トランジション名="ダイアログフェード">
      <div class="dialog-wrapper" v-show="visible">
        <div class="ダイアログ">
          <div class="ダイアログヘッダー">
            <スロット名="タイトル">
              <span class="ダイアログタイトル">
                {{ タイトル }}
              </span>
            </スロット>
          </div>
          <div class="ダイアログボディ">
            <スロット></スロット>
          </div>
          <div class="ダイアログフッター">
            <スロット名="フッター">
              <button @click="onClose">閉じる</button>
            </スロット>
          </div>
        </div>
      </div>
    </トランジション>
  </テレポート>
</テンプレート>

<スクリプト>
'vue' から defineComponent をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'tdialog'
});
</スクリプト>

<スクリプトの設定>
const props = defineProps({
  タイトル: 文字列、
  表示: ブール値
});

const 出力 = defineEmits(['close']);

定数 onClose = () => {
  出力('閉じる');
};
</スクリプト>

使用する際は、

<t-dialog title="LGD は無敵です" :visible="visible" @close="onClose"> これはコンテンツの一部です、Xiaose Xianbei。 </t-ダイアログ>

// ...
const 可視 = ref(false);

定数onDialog = () => {
  表示される値 = !表示される値;
};

定数 onClose = () => {
  表示値 = false;
};

さらに一歩進んで

3. コンポーネントのレンダリング

上記で、標準のモーダル ダイアログ コンポーネントが完成しました。少量のテキストのみを表示する、同様の軽量プロンプト コンポーネントMessage存在します。

上記の例では、 TDialogコンポーネントは必ず使用する場所に記述しますが、このMessgaeコンポーネントでは、プロンプトを表示したいときに呼び出すjsステートメントを使用します。次のようになります。

// プロンプトを呼び出します Message({ message: 'This is a Message' });


関数を使用して呼び出す場合は、この関数を準備する必要があります。この関数の機能は、コンポーネントのレンダリングを完了することです。

const メッセージ = オプション => {
  // コンテナをレンダリングする準備をする const container = document.createElement('div');
  // vnode を生成する
  const vnode = createVNode(メッセージコンストラクタ、オプション);
  // レンダリングレンダー(vnode, コンテナ);
};


MessageConstructorとは何ですか?これは SFC (単一ファイル コンポーネント) です。

<テンプレート>
  <テレポート先="#app">
    <transition name="メッセージフェード">
      <div v-show="visible" ref="ins" class="message" :style="customStyle">{{ メッセージ }}</div>
    </トランジション>
  </テレポート>
</テンプレート>

オンライン体験

コードを表示

要約:

以上が、私たちに多くの利便性を提供してくれるteleportコンポーネントの基本的な使い方と拡張的な使い方です。これで、Vue3組み込みコンポーネントTeleportの詳細な使い方に関するこの記事は終わりです。Vue3組み込みコンポーネントTeleportの使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を続けて閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 での Teleport の使用に関する詳細な説明
  • Vue3 Teleportの実践と原理の詳細な説明
  • vue3のテレポート瞬間移動機能の使い方を詳しく解説
  • vue2 で vue3 のテレポートを実装する方法

<<:  スライドドアを実装するための CSS サンプルコード

>>:  dockerコンテナにviコマンドをインストールする簡単な操作

推薦する

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

MySQL で 1 つのテーブルのフィールドを使用して別のテーブルのフィールドを更新する方法

1. 1列を変更する 学生の更新、都市c s.city_name = c.name を設定します こ...

1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。

キーペアの分離1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。...

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...

React は antd のアップロード コンポーネントを使用してファイル フォーム送信機能を実装します (完全なコード)

私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私...

Ubuntu 20.04 に Python 3 仮想環境をインストールする詳細なチュートリアル

以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...

Vue スキャフォールディングでのレンダリングを理解する

Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...

MySQL のテーブル内のレコード数を制限する方法

目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...

VMware Workstation Pro が Windows で実行されない場合の解決策

国慶節の休暇後、Windows アップデート後に VMware 仮想マシンが開けなくなり、「VMwa...

MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる

背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...

Dockerはrabbitmqのサンプルコードをインストールして実行します

イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...