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分散時系列データベースのインストールと関連操作について簡単に説明します。

推薦する

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...

Navicat for MySql ビジュアルインポート CSV ファイル

この記事では、参考までに、Navicat for MySql の CSV ファイルのビジュアルインポ...

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

シンプルなショッピングカート機能を実現するjs

この記事の例では、簡単なショッピングカート機能を実現するためのjsの具体的なコードを参考までに共有し...

CSS フロントエンドページレンダリング最適化属性 will-change の具体的な使用法

序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...

html-cssタグのスタイル設定が機能しない2つの理由

1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...

冗長カーネルを削除するLinuxディープインの実装方法

前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

etcd クラスターをデプロイするための docker-compose の実装手順

目次docker-compose.ymlを書くdocker-composeを実行するビルドステータス...

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

mysqlタイムスタンプの使用

序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...

分散ロックの原理と3つの実装方法の詳細な説明

現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

Apache ab同時負荷ストレステストの実装方法

腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...

Reactでレシピシステムを実装する方法を解説した記事

目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...