Vueコンポーネント開発経験の共有

この記事では主に Vue コンポーネント開発の経験を共有します。これらの Vue コンポーネント開発のアイデアが皆様のお役に立てれば幸いです。

既存の認知（誤解）

一般的に、コンポーネントというと、最初に思い浮かぶのはポップアップウィンドウで、残りは空白です。
これはプロジェクトで最も一般的に使用される機能だと思うので、再利用しやすいようにコンポーネントを抽出する必要があります~

しかし、このアイデアには問題があることがわかりました。
Vue のコンポーネントと UI ライブラリのコンポーネント (ポップアップ ウィンドウなど) を混同していた可能性があることがわかりました。 。 。

リンクされた思考 (啓発)

は、最近のフォーム開発から生まれました。ページには、リンクされたメニューである 2 つのオプションがあります。
最初に思い浮かぶのは、このスタイルはアドレスを選択するためのリンクメニューとまったく同じであるということです~
(ナンセンス、もちろん、同じプロジェクトのUIスタイルは同じでなければなりません!)
しかし、違いは私のものです。はレベル 1 とレベル 2 で、アドレスはレベル 4 です。

次に、アドレスコンポーネントを導入しようと考えたところ、それがハードコーディングされたレベル 4 であることがわかりました

これで
2、レベル4の連携コンポーネントを参照し、オプションのレベル1オプションまたはレベルに書き換える2 オプション (少し面倒です。時間が来たら、アドレスが自分によって変更されていないこともテストしたいです)
3. ユニバーサルかつ無制限に連携できるメニューを書き換えます (オプションレベルに便利)

最後に3つ選んで自分で作りました。

なぜ 2 が統合されないのかというと、主に考慮すべき点は、これら 2 つのコンポーネントが配置されているビジネス ページのさまざまなロジックにもいくつかの違いがあるということです: 1 リストを取得するロジックが異なる可能性があります。一度に4レベルずつ取得するか、毎回1レベルだけ取得するか、またはレベル2、
これがよくわからない場合は、共通コンポーネントにするときに対処する必要があります（共通部分を強制的に抽出するのは面倒です）
2 私の場合、オプションを直接ポップアップ表示し、アドレスのあるページの場合は、新しいページにジャンプしてクリックしてオプションをポップアップ表示します
親子コンポーネントを介してデータを渡すことができますが、アドレスの場合は vuex を使用します (親子ではなく、ページジャンプ） つまり、実装コストと保守コストが高く、再利用価値はそれほど高くありません。 。 。 (使用率に基づく)

は、それぞれが同じスタイルと異なるロジックを持つコンポーネントを持つ 2 つのページに相当します。

これらは完全に 2 つのコンポーネントです~ 共通のスタイル部分をコピーし、それぞれの内部にビジネス ロジックを実装します。
2 つのコンポーネントは異なるセクションに配置されており、管理とメンテナンスが容易になるように互いに独立しています。

知識の更新(取得)

この時、vueのコンポーネント図と組み合わせると一目瞭然

コンポーネント開発の場合再利用(同じロジック)より分割統治(独自のビジネスロジック)の方が効率的重要！
複雑なビジネス ロジックは、vuex を使用してコンポーネント化を実装する方が便利です~

したがって、コンポーネント化とは一般に、高い凝集性と低い結合性 (PHPer から聞いた専門用語ですが、正しい方法はわかりません) を指すものであることを理解しています。使ってください)~

関連する推奨事項:

Vueコンポーネントとデータ転送の詳細な説明

vueコンポーネントのアラートの詳細な説明

インスタンスの詳細な説明vue間の通信コンポーネント親子チャットルーム

以上がVueコンポーネント開発経験の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。