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

<テンプレート>
  <div class="カテゴリ">
    <h3>{{ title }}カテゴリー</h3>

    <!-- デフォルトのスロットを定義すると、App.vue 内の対応するコンポーネント タグのタグ本体のコンテンツがこのスロットに配置されます -->
    <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「カテゴリー」、
  プロパティ: ["タイトル"],
};
</スクリプト>

<スタイル>
.カテゴリー{
  背景色: スカイブルー;
  幅: 200ピクセル;
  高さ: 300px;
}
h3 {
  テキスト配置: 中央;
  背景色: オレンジ;
}
</スタイル>

<テンプレート>
  <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%;
}
</スタイル>