スロットとは何かスロットは、親コンポーネントに提供される子コンポーネントのプレースホルダーで、<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. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...
この記事では、複数の画像を切り替えるJavaScriptの具体的なコードを参考までに紹介します。具体...
https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...
この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有...
カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...
el-form フォームにルールを追加します。データにルールを定義する定義されたルールをel-for...
コードをコピーコードは次のとおりです。 <span style="font-size...
序文MySQL は、myisam、innodb、memory、archive、example など、...
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...
この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の...
目次概要コードの実装要約する概要アダプタ パターンは、デザイン パターンの動作パターンのパターンです...
アプリケーション例ウェブサイト http://www.uhuigou.net画像の動的読み込みは目新...
フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...
1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...