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 でデプロイされる一般的なアプリケーション)

推薦する

JavaScriptの構文とコード構造に関する深い理解

目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...

Vue要素と多言語切り替えの詳細な説明

目次序文複数の言語を切り替えるにはどうすればいいですか? 1. vue-i18nパッケージをインスト...

クリエイティブな会社概要ウェブページデザイン

ユニークな「About」ページ自分を他の人たちと差別化する素晴らしい方法は、本当にユニークな自己紹介...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

React仮想リストの実装

目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...

標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明

MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

Server-U 14バージョンのインストールと使用方法

Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...

MySQL における Datetime と Timestamp の使用の概要

目次1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか? 2. TIMESTAMP...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

Reactは適応性の高い仮想リストを実装する

目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理:最適化: 0x2 ...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...

HTML テーブルタグチュートリアル (21): 行の境界線の色属性 BORDERCOLOR

テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...