Vue でのスロットの使用: slot 1. スロット タグ <slot></slot> は、子コンポーネントのテンプレート内で直接使用でき、親コンポーネントによって子コンポーネントに挿入されたコンテンツを表示できます。 2. スロットタグにいくつかのデフォルト値を書き込むことができます。親コンポーネントがコンテンツを挿入しない場合は、デフォルト値が表示されます。コンテンツを挿入する場合は、挿入されたコンテンツのみが表示されます。 3. 複数のスロット タグを使用し、複数のコンテンツを直接挿入する場合、各スロット タグには挿入されたすべてのコンテンツが含まれます。 スロット属性を使用して、挿入されたさまざまなコンテンツに指定された名前を設定し、対応するスロット タグに対応する名前属性値を設定して、スロット タグに指定された挿入されたコンテンツを表示させることができます。 1. スロットは一般的な用語です。テンプレート内の 3 つのスロット タグはすべてスロットです。 2. ただし、複数のスロットを区別する必要があり、それぞれに name 属性が設定されます。これは「名前付きスロット」と呼ばれ、name 属性を使用して名前を付ける必要があります。 3. 上記はスロットに挿入されたコンテンツであり、特定の名前のコンテンツをサブコンポーネントの対応する名前に挿入します。ここでは、スロット name="footer" に挿入されます。 4. 一般的に、スロットが 1 つしかない場合は、名前を付ける必要はありません。スロットが複数ある場合にのみ、それらを区別するために名前を付ける必要があります。 <div id="アプリ"> <子供> <!-- <div slot="header">ヘッダー</div> --> <div slot="footer">フッター</div> </子> </div> <スクリプト> Vue.component('child',{ //スロットを使用すると、サブコンポーネントに要素を渡すのが簡単になり、サブコンポーネントがスロットテンプレートのコンテンツを使用するのも非常に簡単になります:`<div> <スロット名='ヘッダー'> <h6>ヘッダースロットの内容のデフォルト値は空です</h6> </スロット> <div class="content">本文</div> <スロット名='フッター'></スロット> </div>` }) var vm = 新しい Vue({ el: "#app", }) </スクリプト> スコープ付きスロット: テンプレートタグで囲む1. <slot v-for='item of list' :item=item></slot> は、リストをループするかどうかのみを決定しますが、リスト内の各項目の表示方法は外部で決定されます。 2. そのため、子コンポーネントにスロットを渡す必要があります。まず、テンプレート[固定の書き込み方法]を最外層(これがスコープスロットです)に配置し、スロットスコープ属性(属性値はカスタマイズされます)を記述する必要があります。 (例: <template slot-scope='props'></template> は、サブコンポーネントがスロットを使用する場合、アイテム データをスロットに渡し、このデータはサブコンポーネントが上で使用されるときに使用できることを意味します。このデータは slot-scope 属性値に配置されます) 3. スコープ スロットを使用する必要がある状況: サブコンポーネントをループする必要がある場合、またはその一部を外部から渡す必要がある場合。 スコープ付きスロットを使用する場合、子コンポーネントは親コンポーネントのスロットにデータを渡すことができます。親コンポーネントによって渡されたスロットがこのデータを受け取る場合、外側のレイヤーでテンプレートを使用し、スロットスコープに対応する属性名を通じて渡されたデータを受信する必要があります。 <div id="アプリ"> <子供> <!-- 親コンポーネントが子コンポーネントを呼び出すと、スコープ スロット テンプレートが子コンポーネントに挿入されます。 スロットでは、子コンポーネントから受け取ったデータ項目を宣言し、それをスロットスコープのプロパティに配置し、H1テンプレートを通じて表示します --> <テンプレート スロット スコープ="props"> <li>{{props.item}} -こんにちは</li> </テンプレート> </子> </div> <スクリプト> Vue.component('child', { データ:関数(){ 戻る { リスト:[1,2,3,4] } }, //子コンポーネントがスロットを使用する場合、アイテムのデータをスロットに渡し、このデータを親コンポーネント テンプレートで使用します:`<div> <ul> <slot v-for="リストの項目" :item=項目> </スロット> </ul> </div>` }) var vm = 新しい Vue({ el: "#app" }) </スクリプト> 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMware pro15 インストール macOS10.13 詳細インストール図(画像とテキスト)
>>: MySql8.0.19 インストールピットレコードを共有する
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...
目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...
コードをコピーコードは次のとおりです。 <span style="font-fami...
1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...
1. 文法: <meta name="名前" content="...
1. ダウンロード、例として8.0を取り上げますダウンロードアドレス: https://dev.my...
目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...
目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...
これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...
MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...
1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...
MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...
目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...
1. はじめに以前は、Python アプリケーションの作成を開始したい場合、最初のステップはマシンに...
タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...