Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておらず、改めて学習している人の記事ばかりだと感じます。いずれも .Vue ファイルを使用しており、初心者には向かないと思うので、初心者向けの記事を書きます。 最初の投球ルーチン: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>スロットを通じてコンテンツを配信するコンポーネント</title> <script src="あなたの Vue アドレス、最新バージョンをダウンロードしてください"></script> <スクリプト> Vue.component("テストスロット",{ // スロットはデフォルトのコンテンツ テンプレートを許可します: `<div> エラー! <スロット></スロット> </div> `、 データ:関数() { 戻る { 名前:"ペリー" } } }); // 名前付きスロット Vue.component("slot-name",{ テンプレート: `<div> <ヘッダー> <スロット名="ヘッダー"></スロット> </ヘッダー> <メイン> <スロット ></スロット> </メイン> <フッター> <スロット名="フッター"></スロット> </フッター> </div> ` }); // スコープスロット Vue.component("todo-list",{ 継承属性:false、 小道具:{ todos:[配列、オブジェクト] }, テンプレート: `<ul> <li v-for="todos 内の todo" :key="todo.id" style="display: block;" > <スロット:data="todo">{{todo.text}}</スロット> </li> </ul> ` }); </スクリプト> <スタイル> li{ リストスタイル: なし; 表示: インラインブロック; フォントサイズ: 25px; } </スタイル> </head> <本文> <div id="アプリ"> <!--1. スロット コンテンツ スロットは、コンポーネントを含むあらゆるコンテンツ、コードを受け取ることができます --> <test-slot>何か悪いことが起こりました。あなたは誰ですか? 知り合いですか?</test-slot> <テストスロット> 何か悪いことが起こりました。 <!-- 変数は許可されていますが、有効にするにはこのスコープ内にある必要があります。ここでは、name の値は "叉道口" になります --> <h3>タイトル {{name}}</h3> <img src="img/flower.jfif" alt="画像を表示できません"> </テストスロット> <!--2. 名前付きスロット slo には特別な属性 name があり、これにより名前付きスロットを次のようになります--> <スロット名> <h3>学習を奨励する</h3> <p>若いときに努力しないと、年をとったときに後悔することになる</p> <p>時間は矢のように過ぎ去る</p> <テンプレートスロット="ヘッダー"> <ul> <li>ホーム</li> <li>ようやく</li> <li>人生について</li> <li>将来について</li> </ul> </テンプレート> <p>こんにちは</p> <p スロット="フッター"> <p>終了</p> <p>粤ICP備6545646456415</p> </p> </スロット名> <!-- slot-scope 経由で実装されたスコープ付きスロットを使用する --> <todo-list :todos="todos"> <テンプレート スロット スコープ="slotProps"> <span v-if="slotProps.data.isTrue">√</span> {{slotProps.data.text}} </テンプレート> </todo-list> <!--ES2015 構造構文を使用する--> <todo-list :todos="todos"> <テンプレート スロット スコープ="{データ}"> <span v-if="data.isTrue">√</span> {{データ.テキスト}} </テンプレート> </todo-list> </div> <スクリプト> 新しいVue({ el:"#アプリ", データ:{ 名前:"クロスロード", すべて: {テキスト:"A",id:1,isTrue:true}, {テキスト:"B",id:2,isTrue:true}, {テキスト:"C",id:3,isTrue:false}, {テキスト:"D",id:4,isTrue:true}, ]、 // スロットプロパティ: "" } }) </スクリプト> </本文> </html> この例では、通常のスロットと名前付きスロットについても説明していますが、ここでは説明しません。スコープ付きスロットについてのみ説明します。まず、「スコープ スロット」という名前から始めましょう。本来、親コンポーネント テンプレートは子コンポーネント テンプレートのデータを使用できません。公式サイトでは、親コンポーネント テンプレートのすべてが親スコープでコンパイルされ、子コンポーネント テンプレートのすべてが子スコープでコンパイルされることが特に強調されています。この文は実際には理解するのがかなり難しいです。理解するために例を見てみましょう。 <テストスロット> 何か悪いことが起こりました。 <!-- 変数は許可されていますが、有効にするにはこのスコープ内にある必要があります。ここでは、name の値は "叉道口" になります --> <h3>タイトル {{name}}</h3> <img src="img/flower.jfif" alt="画像を表示できません"> </テストスロット> これは上記の例ですが、ここでの名前は現在のコンポーネント内にある必要があり、テスト スロット コンポーネント内のデータであってはなりません。これがスコープの制限です。名前データは親コンポーネントのスコープに属しているため、親コンポーネントのデータのみになります。しかし、スロットスコープの出現により、親コンポーネントは子コンポーネント内のデータを呼び出すことができ、子コンポーネントのデータはスロットスコープ属性を通じて親コンポーネントに渡される。 // スコープスロット Vue.component("todo-list",{ 継承属性:false、 小道具:{ todos:[配列、オブジェクト] }, テンプレート: `<ul> <li v-for="todos 内の todo" :key="todo.id" style="display: block;" > //ここで、data="todo" は、子コンポーネントの todo データが親コンポーネントに渡されることを意味します<slot :data="todo">{{todo.text}}</slot>//todo.text はデフォルト値であり、親コンポーネントによって上書きされます</li> </ul> ` }); <!-- slot-scope 経由で実装されたスコープ付きスロットを使用する --> <todo-list :todos="todos"> <テンプレート スロット スコープ="slotProps"> <span v-if="slotProps.data.isTrue">√</span> {{slotProps.data.text}} </テンプレート> </todo-list> 使い方はこんな感じです。子コンポーネントから渡された、todo という値を持つ data というデータが slot-scope で受信されます。ここで slot-scope が受け取るオブジェクトは slotProps というオブジェクトで、渡したデータは slotProps のプロパティとして使用されるので、data を呼び出すには slotProps.data が必要であることに注意してください。前述のとおり、データの値は todo です。todo とは何でしょうか? Todo は todos からトラバースされるため、オブジェクトです。 新しいVue({ el:"#アプリ", データ:{ 名前:"クロスロード", すべて: {テキスト:"A",id:1,isTrue:true}, {テキスト:"B",id:2,isTrue:true}, {テキスト:"C",id:3,isTrue:false}, {テキスト:"D",id:4,isTrue:true}, ]、 // スロットプロパティ: "" } }); スロットスコープ機能について理解できましたが、その適用シナリオは何でしょうか?誰かがカプセル化されたコンポーネントを作成したが、データの表示スタイルはユーザーが定義する必要があると考えていると想像できます。上記のように、リストのスタイルがユーザーによって定義されることを望みます。たとえば、√記号を追加しました。最初は初期データを渡しますが、そのデータはサブコンポーネントによって処理される必要があります。コンポーネントを書いた人は、処理されたデータを表示したいはずです。このとき、スロットスコープは非常に重要です。 要約する これで、Vue の slot-scope の詳細な理解に関するこの記事は終了です。Vue slot-scope の理解に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Docker デプロイメントサービスの落とし穴を登る過程の詳細
目次1. 事務:取引の 4 つの主な特徴:同時トランザクションはどのような問題を引き起こしますか? ...
背景最近、SQL 文を書くときに、IN と Exists のどちらを選択するか迷ったので、両方の方法...
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...
この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...
Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...
XHTML CSS ページ制作中に遭遇する問題の解決策は、解決策と呼ぶには少々大げさです。せいぜい、...
目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...
ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...
序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...
目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...
プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...
始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
序文前回はLinearLayoutについて説明しました。今回はFrameLayoutの使い方を説明し...