ホームページ > 記事 > ウェブフロントエンド > コンポーネントの再利用性の概念の 6 つの異なるレベルの詳細な説明
この記事では、コンポーネントの再利用性の概念を 6 つの異なるレベルで詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#誰もが、より多くのコードを作成しながら、より少ないコードを作成したいと考えています。これを実現するために、コンポーネントを何度も再利用できるようにコンポーネントを構築します。
一部のコンポーネントは基本的な再利用性のみを必要としますが、その他のコンポーネントは完全に再利用する前に、より複雑なリファクタリング技術が必要です。
再利用性の概念にはさまざまなレベルがあります。まずは体験してみましょう。その後の更新で 1 つずつ説明します。
コンポーネントを (コードを直接使用する代わりに) 再利用すると、次の 2 つの利点が得られます。
コンポーネントには、デフォルトでメイン バージョンとアイコン付きのバージョンがあります。ただし、バージョンごとに完全に新しいコンポーネントを作成するのではなく、異なるタイプを切り替えるために props
を指定します。 これらの
を追加しても、通常はコンポーネントがそれほど複雑になることはありません。同時に、コンポーネントをより柔軟に使用できるようになります。 注: これは、
プロップや disabled
プロップなど、状態やデータを保存するために prop
を使用することとは異なります。
prop を配置することでそれらをコンポーネントに組み込む必要があります。 ただし、コンポーネントが十分に適応性がある場合は、将来のニーズに対応するためにコンポーネントを変更する必要はありません。
適応性のあるにするために、スロット
を使用してそれを実現できます。たとえば、Button コンポーネントに渡される
text
default slot を使用できます:
<!-- Button.vue --> <template> <button class="btn btn--default" @click="$emit('click')" > <slot /> </button> </template>
渡される型が
string か
number かに制限されなくなりました。 Button
コンポーネントを変更せずに
loading
<template> <Button> <img v-if="loading" src="spinner.svg" /> Click Me </Button> </template>
4. 逆変換
完全なマークアップ ブロックを スコープ スロット
5. 拡張機能
次のステップでは、これらの手法をコンポーネント全体に適用して、コンポーネントの動作をより簡単に拡張できるようにします。
名前付きスロット
Adaptability
とReversibility は、単独では動作を拡張するための 1 つのオプションを提供しますが、複数の拡張ポイントがあると多くの異なるオプションが提供されます。
ここには、
header、
default
footer を含む
Modal コンポーネントがあります:
<template> <div class="modal"> <slot name="header"> <h2>{{ title }}</h2> </slot> <!-- Default slot for main content --> <slot /> <slot name="footer"> <Button @click="closeModal"> Close </Button> </slot> </div> </template>
これは非常に単純な拡張例であり、このコンポーネントを拡張するためのいくつかのオプションがすでに用意されています:
default slot
をオーバーライドしてコンテンツ はスロット名で上書き可能
header
の内容はスロット名で上書き可能
footer
header
このコンポーネントの動作を拡張する必要はありませんが、コンポーネントの一部を拡張することはできます。いずれにしても、柔軟性が高まり、コードの再利用性が高まります。
まず、かなり一般的な機能を持つ基本コンポーネントから始めます。次のコンポーネントはより具体的で、ベース コンポーネントをいくつかの方法で拡張しています。次に、実際の作業を完了する最終コンポーネントが得られるまで、前の 基本コンポーネント に基づいて上方への拡張を続けます。
これは、非常に一般的なAnimal からより具体的な
Mammal(哺乳類)、そして
Dog(犬)## に進む方法と似ています。 # そして最後は Poodle(Poodle)
の方法で終わります。必要なのは Poodle
コンポーネントだけである場合、基本コンポーネント
は時間の無駄であるように思えます。 しかしは、大規模なアプリケーションでは異なります。さまざまなパーソナライズされたニーズを満たすために、同じ基本概念に複数の変更を加える必要があります。現時点では、この 基本グループネストされた部分のアイデアはとても重要です。
を拡張して、Corgi
コンポーネントと Beagle
コンポーネントを取得できます。または、Mammal
コンポーネントを拡張して Cat
コンポーネントを取得し、Tiger
および Lion
コンポーネントを追加できます。
プログラミング教育著者: Michael Thiessen
翻訳アドレス: https://segmentfault.com/a/1190000039699016
プログラミング関連の知識については、
以上がコンポーネントの再利用性の概念の 6 つの異なるレベルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。