1. 3 レベルのリンケージ コンポーネント (グローバル コンポーネント) を完了する
3段階連携部品はホーム、検索、詳細で使用する必要があるため、3段階連携部品をグローバル部品として使用することで、一度登録するだけでプロジェクト内のどこでも使用できるようになります。
新しい「home/TypeNav/index.vue」を作成し、構造とスタイルを記述し、コンポーネントに名前を付けます
main.js を開き、3 階層連携コンポーネントをグローバル コンポーネントとして登録します。
次に、ホーム モジュールで 3 レベルのリンケージ コンポーネントを使用できます。
まず「Home/index.vue」を開きます
グローバルコンポーネントとして登録されているので導入不要、<TypeNav></TypeNav>に直接書き込む
この時点で、npm run serve を再実行して、3 レベルのリンケージ コンポーネントを確認します。
2. ホームページ分割静的コンポーネント (部分コンポーネント)
2.1 新しい ListContainer コンポーネントを作成する
新しい「Home/ListContainer/index.vue」を作成します
構造とスタイルを書く
画像に使用する画像リソースを追加する
次に、ListContainer コンポーネントを Home コンポーネントに導入する必要があります.ListContainer コンポーネントはグローバル コンポーネントではないため、導入して登録し、使用する必要があります。「Home/index.vue」を開き、次のコードを追加します。
2.2 新しい Recommend コンポーネントを作成する
新しい「Home/ListContainer/index.vue」を作成します
構造とスタイルを書く
画像リソースを追加
「Home/index.vue」を開き、次のコードを追加します。
手順は上記とまったく同じであるため、Rank、Brand、Floor、Like、および TypeNav コンポーネントはここでは省略されています。