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 デプロイメントサービスの落とし穴を登る過程の詳細
最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...
el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...
目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...
以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...
序文この記事は主にubantu 16.4 Hadoop完全分散構築に関する関連コンテンツを紹介し、皆...
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...
面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...
序文デフォルトでは、Nginx ログはファイルに書き込まれます。各ドメインのログを区別するために、通...
以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...
<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...
目次1. 接続制御プラグイン(connection_control)の紹介1.1 connectio...
Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...