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 インストールピットレコードを共有する
本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...
SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...
目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...
目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...
序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...
コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...
方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...
1. 背景多くのブログや記事を読みましたが、JVM のメモリ割り当て方法に関する包括的な記事は見つか...
公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...
序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...
1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...
目次ケーススタディアカウント残高を更新する直接更新楽観的ロック方式ロックフリーソリューションキューイ...
私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...
フラットなウェブサイト構造の本質はシンプルさです。コンテンツの重要なポイントを強調し、ページの装飾効...
1 背景最近、ZC706-ARM 開発ボードの Linux システムでコンパイル システム (apt...