Vue コンポーネント開発の概要

この記事では主に Vue コンポーネント開発の考え方と関連する原則について紹介します。興味がある方は学習して参考にしてください。

通常、コンポーネントというと、最初にポップアップ ウィンドウを思い浮かべますが、残りのことは頭が真っ白になります。

これはプロジェクトで最もよく使用される機能だと思うので、再利用しやすいようにコンポーネントを抽出する必要があります~

しかし、この考えには問題があることがわかりました。

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

これは最近のフォーム開発に由来しており、ページにはリンクされたメニューである 2 つのオプションがあります。

最初に思い浮かぶのは、このスタイルはアドレスを選択するための連携メニューとまったく同じであるということです~

(ナンセンス、もちろん、同じプロジェクトの UI スタイルは同じでなければなりません!)

しかし、違いは、私のアドレスはレベル 1 で、もう 1 つはレベル 2 であることです。アドレスはレベル 4 です。

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

この時点では2種類しか思いつきませんでした 方法

1、レベル1オプションとレベル2オプションの2つのコンポーネントにそれぞれ書き換えます(比較的低いと思われます)

2、レベル4の連携コンポーネントを引用し、オプションのレベル1オプションまたはレベル2オプションに書き換えます(少し面倒)、アドレスが私によって変更されていないこともテストします)

3.ユニバーサル無制限連携メニューを書き換えます(オプションレベルに便利)

最終的に3を選んで自分で作りました。

なぜ 2 が統合されないのかというと、主に考慮すべき点は、これら 2 つのコンポーネントが配置されているビジネス ページのロジックにもいくつかの違いがあるということです:

1 リストを取得するロジックが異なる可能性があります。一度に 4 つのレベル、または毎回 1 つだけ レベルまたはレベル 2、

これについてよくわからない場合は、ユニバーサルコンポーネントにするときに対処する必要があります

2 私の場合、私は直接ポップしますアドレスが含まれているものについては、新しいページにジャンプし、クリックしてオプションをポップアップ表示します

私の場合、データは親子コンポーネントを介して渡すことができます。アドレスはvuexを使用します（親子ではありません）。つまり、導入コストや保守コストが高く、再利用価値はそれほど高くありません。

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

これらは完全に 2 つのコンポーネントです~

共通のスタイル部分をコピーし、それぞれの内部にビジネス ロジックを実装します。

2 つのコンポーネントは異なるセクションに配置されており、管理とメンテナンスが容易になるように互いに独立しています。

このとき、vueコンポーネント図と組み合わせると、

コンポーネント開発においては

分割統治(独自のビジネスロジック)が再利用(同じロジック)よりも重要であることが分かります！

複雑なビジネスロジックは、vuexでコンポーネント化を実装する方が便利です~

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue.js ユニバーサル アプリケーション フレームワーク - Nuxt.js の分析

Vue コンポーネント オプション props の使用の概要

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