Vue デフォルトスロットの理解とサンプルコード

Vue デフォルトスロットの理解とサンプルコード

スロットとは何か

スロットは、親コンポーネントに提供される子コンポーネントのプレースホルダーで、<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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の匿名スロットと名前付きスロットの詳細な説明
  • Vue 名前付きスロットの基本的な使用例
  • Vue はスロットを使用してコンテンツを配布します。操作例 [単一スロット、名前付きスロット、スコープ付きスロット]
  • Vue の匿名スロット、名前付きスロット、スコープ付きスロットの使い方の詳細な説明
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • VUE のコンパイル スコープとスロット スコープのスロットの問題について
  • Vueスコープスロットの実装方法と機能の詳しい説明
  • Vue のデフォルト スロット、名前付きスロット、スコープ スロットの定義と使用方法

<<:  docker を使用して minio と java sdk を構築するプロセスの詳細な説明

>>:  Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)

推薦する

フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...

複数の画像を切り替えるJavaScript

この記事では、複数の画像を切り替えるJavaScriptの具体的なコードを参考までに紹介します。具体...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

js キャンバスで円形の水のアニメーションを実現

この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有...

シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...

Vue はフォームデータ検証のサンプルコードを実装します

el-form フォームにルールを追加します。データにルールを定義する定義されたルールをel-for...

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

MySQL InnoDBとMyISAMの違いを簡単に理解する

序文MySQL は、myisam、innodb、memory、archive、example など、...

MySqlエスケープの詳細な使用例

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

CSS3 フィルターを使用して PNG 画像の色を変更するサンプル コード

この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の...

JavaScript デザインパターンの学習 アダプタパターン

目次概要コードの実装要約する概要アダプタ パターンは、デザイン パターンの動作パターンのパターンです...

動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例

アプリケーション例ウェブサイト http://www.uhuigou.net画像の動的読み込みは目新...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...

MySQL マスタースレーブレプリケーションプロセスの詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...