Vue のスロットの使用法と適用シナリオの詳細な分析

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか?

Vue では、子コンポーネント タグの中央に何もラップできないことはわかっています。

しかし、コンポーネントを使用する場合、コンポーネントの外部のタグをカスタマイズしたいことがよくあります。Vue では、スコープ スロットと呼ばれるスロット メカニズムが追加されました。必要なバージョンは 2.1.0 以上です。

スロットは実際にはプレースホルダーです。これはコンポーネント内の HTML テンプレート内の場所を占め、何かを渡すことを可能にします。スロットは、匿名スロット、名前付きスロット、スコープ付きスロットに分けられます。

2.6.0 では、名前付きスロットとスコープ付きスロットの新しい統合構文 (v-slot ディレクティブ) が導入されました。スロットとスロットスコープを置き換えます

匿名スロット

匿名スロット。単一スロットまたはデフォルト スロットとも呼ばれます。名前付きスロットと比較すると、name 属性を設定する必要がなく、非表示の name 属性がデフォルトになります。

父親.vue

子.vue

匿名スロットの場合、name 属性は default に対応し、空白のままにしてデフォルト値を使用することもできます。

使用時に注意すべき別の問題があります。匿名スロットが 2 つ以上ある場合、子タグの内容は各スロットで置き換えられます。

名前付きスロット (vue2.6.0 以降では slot='name' は非推奨)

名前が示すように、スロットには名前が付けられます。定義: または、単純な略語を使用して #header を定義します。使用法: テンプレート タグで囲みます。

父親.vue

子.vue

ここでは、複数の名前付きスロットの使用について説明します。スロットの位置は、使用されているスロットの位置によって決まるのではなく、定義されるときの位置によって置き換えられます。

父親.vue

子.vue

スコープ付きスロット

データを転送するために使用されるスロットです。

スロットでデータを使用する場合は、スコープの問題に注意する必要があります。Vue の公式ドキュメントには、親テンプレートのすべてのコンテンツは親スコープでコンパイルされ、子テンプレートのすべてのコンテンツは子スコープでコンパイルされると記載されています。

子コンポーネントのデータを親のスロットコンテンツで利用できるようにするには、データを要素のプロパティとしてバインドします: v-bind:text="text"

知らせ:

匿名スコープスロットと名前付きスコープスロットの違いは、v-slot:defult="accepted name" (defult (anonymous は省略可能、named の反対は対応する名前を記述することです)) です。

v-solt は分解して受け取ることができます。分解によって受け取るフィールドは、渡されるフィールドと同じである必要があります。たとえば、1 は v-slot="{one}" に対応します。

レンダリング

要約する

これで、Vue のスロットの使用方法と適用シナリオに関するこの記事は終了です。Vue スロットの使用方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue elementuiは、検索バーのパブリックコンポーネントのカプセル化のサンプルコードを実装します。
  • vue element-ui で独自のコンポーネントをカプセル化する方法の詳細な説明
  • 一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録
  • vue スロットを使用して vue で共通コンポーネントをカプセル化する方法

<<:  MySQLワームレプリケーションの基本知識

>>:  DockerでのinfluxDB分散時系列データベースのインストールと関連操作について簡単に説明します。

推薦する

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

ネイティブ js で呼び出し、適用、バインドを実装する方法

1. 呼び出しを実装するステップ:関数をオブジェクトのプロパティとして設定します。これを関数に割り当...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

Dockerコンテナイメージからコードを復元する手順

コードが失われ、コンテナ内で実行されているイメージから必要なコードを回復する必要がある場合があります...

MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...

ウェブサイトメンテナンスページのリスト構築のヒント

また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要がありま...

jQuery ベースのカレンダー効果

この記事では、カレンダー効果を実現するためのjQueryの具体的なコードを例として紹介します。具体的...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

クリーンなコードのための Web デザインの 12 の法則 [グラフィック]

美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...

Linux での Tomcat8 のインストールとアンインストールに関する詳細なグラフィック チュートリアル

[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

MySQLデータベース監視binlogを有効にする手順

序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...

HTML 5 ワーキングドラフトの謎を解く

World Wide Web Consortium (W3C) は、HTML 5 仕様のドラフトをリ...