スロットとは何かスロットは、親コンポーネントに提供される子コンポーネントのプレースホルダーで、<slot></slot> で表されます。親コンポーネントは、HTML、コンポーネントなどの任意のテンプレート コードをこのプレースホルダーに入力できます。入力されたコンテンツは、子コンポーネントの <slot></slot> タグを置き換えます。 デフォルトスロットの理解完全なタグ()を使用して、対応する構成を完全なタグで記述します(たとえば、必要な機能など)。 次に、デフォルトのスロットタグを使用して、書き込まれたコンテンツをこのスロットに配置します(このスロットは通常、子コンポーネントに存在するため、親コンポーネントが書き込んだ内容を子コンポーネントに渡すことができます)。 完全なタグに記述された構成スタイルについては、親コンポーネントと子コンポーネントの両方に記述できます (1. 親コンポーネントにスタイルが記述されている場合、スタイルはレンダリングされてから子コンポーネントに配置されます。2. 子コンポーネントにスタイルが記述されている場合、構成はスロットに配置され、スロットが配置されている子コンポーネントには構成をレンダリングする CSS スタイルがあるため)。 コードスニペット①カテゴリー.vue <テンプレート> <div class="カテゴリ"> <h3>{{ title }}カテゴリー</h3> <!-- デフォルトのスロットを定義すると、App.vue 内の対応するコンポーネント タグのタグ本体のコンテンツがこのスロットに配置されます --> <スロット></スロット> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:「カテゴリー」、 プロパティ: ["タイトル"], }; </スクリプト> <スタイル> .カテゴリー{ 背景色: スカイブルー; 幅: 200ピクセル; 高さ: 300px; } h3 { テキスト配置: 中央; 背景色: オレンジ; } </スタイル> ②App.vue <テンプレート> <div class="コンテナ"> <カテゴリータイトル="食品"> <画像 src="https://zqcdn.itzjj.cn/static/skin/mfw0321/static/picture/dj_scv.jpg" 代替案 = "1" /> </カテゴリー> <Category title="ゲーム" :listData="ゲーム"> <ul> <!-- この時点では変数はapp.vue内に直接格納されているので、ゲームを直接走査することができます。 トラバース後、スロット関数を使用してCategory.vueに渡します --> <li v-for="(g, index) ゲーム内" :key="index"> {{g}} </li> </ul></カテゴリー > <Category title="映画" :listData="films"> <!-- コントロールによりビデオを再生できます --> <ビデオ コントロール src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" </ビデオ> </カテゴリー> </div> </テンプレート> <スクリプト> 「./components/Category」からカテゴリーをインポートします。 エクスポートデフォルト{ 名前:「アプリ」、 コンポーネント: { カテゴリ }, データ() { 戻る { 食べ物: ["火", "あなたの肉", "ミートボール"], ゲーム: ["Red Alert Online"、"Cross Fire"、"Audition"]、 映画: [「ゴッドファーザー」、「ショックウェーブ」、「オーサム」]、 }; }, }; </スクリプト> <スタイル> 。容器 { ディスプレイ: フレックス; コンテンツの両端揃え: スペースを空ける; } ビデオ 幅: 100%; } 画像 { 幅: 100%; } </スタイル> 要約するこれで、vue デフォルト スロットに関するこの記事は終了です。vue デフォルト スロットに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: docker を使用して minio と java sdk を構築するプロセスの詳細な説明
>>: Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)
目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...
目次序文複数の言語を切り替えるにはどうすればいいですか? 1. vue-i18nパッケージをインスト...
ユニークな「About」ページ自分を他の人たちと差別化する素晴らしい方法は、本当にユニークな自己紹介...
Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...
Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...
Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...
目次1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか? 2. TIMESTAMP...
目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...
目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理:最適化: 0x2 ...
1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...
テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...