モジュール機能の紹介:共通のコンポーネントをカプセル化したいのですが、コンポーネントの一部をカスタマイズする必要があり、データと構造が異なります。
これにはコンポーネントにコンポーネントをネストする必要があるため、スロットスロットを使用して解決することを考えました。
実現のアイデア:
1、カプセル化最外成分、その中のループデータは、スロット位置のサブコンポーネントへのデータの単一の項目を渡す必要
ニーズがあることをそのスロットの名前の値を定義し、データを定義しますサブコンポーネント(propsとして理解できます)に渡されます。sub-componentpropsオブジェクトが受け入れられ、オブジェクトの属性はnodeListDataです
。2。親コンポーネントを呼び出すとき、スロット部分は定義された名前の値をにバインドする必要があります。テンプレートを作成し、テンプレートで
v-slotコマンドを使用して、スロットで定義された名前の値をバインドします。次に、サブコンポーネントはスロットの小道具でプロパティ値を取得し、コンポーネントに独自のロジックを実装できます。 ;
サブコンポーネントによって受け入れられるデータを次の図に示します。
上のスクリーンショットでnodeListDataのみを定義し、複数のプロパティを定義することもできます。たとえば、id;
総括する:
- スロットの場所の名前と属性値の定義
- 親コンポーネントは、スロット位置でテンプレートにバインドする必要があります
- 親コンポーネントのv-slotにバインドされた値は、コンポーネントのスロットの名前の値に対応している必要があります