浅い奥行きVue:コンポーネント

コンポーネントはvue開発に不可欠な一環であり、コンポーネントという屠龍刀をうまく使えば、多くの問題を解決できる.
コンポーネント
公式の定義:

コンポーネントは多重化可能なVueインスタンスであり、名前を付けてもよい.

公式の定義は非常に簡明で、コンポーネントはインスタンスです.
コンポーネントの使用方法
コンポーネントインスタンスコードを具体的に記述する前に、次のようにします.

すべてのコンポーネントが単一ファイルコンポーネント、すなわち1つ.vueファイルが1つのコンポーネント

data1つの関数でなければならない

templateノードの下にサブノードが1つしかない

制約は多くありませんが、最後の2つは心に刻まなければなりません.
単一ファイルコンポーネントに基づいて、1つのコンポーネントの基本的な構成は次のとおりです.

export default {
    //      ，    
}

単一ファイルコンポーネントは、次の3つのセクションで構成されています.

ページ内容、すなわちビュー部分、この部分はデータの展示

論理、データ定義部分、この部分が定義・制御データ

スタイル部分、ビューにサービス

この3つの部分は、次の章で一つ一つ実践され、本編では具体的なインスタンスコードは提供されません.この記事では、コンポーネントを書く前に注意すべき点を明らかにすることに重点を置いています.
コンポーネントの名前付け
ここで問題に向かって走っているのは、

フロントエンドでもバックエンドでも他の方向でも、ネーミングは必ず重視し、正確で曖昧で簡潔なネーミングが与えられる

ネーミングは、コードを自分で維持するためだけでなく、チーム、コラボレーション開発、コミュニケーションのためです.良好なネーミングは、コードをより読み取りやすくし、良好な読み取りは、コードをより保守的にします.以上、子供靴たちが真剣に名前をつけて、プロジェクトで類似の名前を産まないことを望んでいます.

var x = getSomething(y);

var somethingA = getSomethingB();

...

ここで、vue公式は、W 3 C仕様に従ってコンポーネントの名前を付けることを強く提案しています.

アルファベットはすべて小文字で区切り文字はハイフン(短横線):-

もちろんPascalの名前を使うこともできます.

頭文字大文字、区切りなし

ただし、コンポーネントを使用する場合は、W 3 C仕様が使用されます.HelloWorldという名前のコンポーネントがあるとしたら、他のコンポーネントでどのように使用しますか.

名前を付ける際には、次の要素を考慮することをお勧めします.

言葉は達意、言葉は簡潔、長々としない

多義性の発生を避ける

中国語の直接翻訳は避け、特定の名詞や業務で抽出された言葉が直接翻訳に適していない場合が多い(機械翻訳).同じ机翻语汇に対して、百人の心の中に百の异なる解釈があるかもしれない

優秀なオープンソース項目の命名規範参照

参考言語/フレームワークで推奨される仕様

同一項目において、同一業務知識・名詞の翻訳について可能な限り一致を保つ(同様に多義性を避けるため)

同じプロジェクトでは、できるだけ統一的なスタイルを維持します.
コンポーネントの登録
別のコンポーネントで他のカスタムコンポーネントを使用する必要がある場合は、まずコンポーネントを登録する必要があります.
登録は次のとおりです.

ローカル登録

グローバル登録

ローカル登録
ローカル登録の使用方法:

//    ：    
import HelloWorld from 'your/component/path'

export default {

    //    ：          ，             
    components: [
        HelloWorld
    ]
}

上記の図では、単一ファイルコンポーネントにローカルに登録する使用手順を示します.

コンポーネント導入

現在のコンポーネントに登録すると、登録後の役割ドメインは現在のコンポーネント内のみであるため、このステップはローカル二文字を体現する.

ビューで使用

グローバル登録
このHelloWorldコンポーネントが常に使用されるUIコンポーネントである場合、ローカル登録を使用すると、各コンポーネントに第1ステップと第2ステップの重複コードが存在することを意味します.
コードを繰り返すのを見て、私たちはそれをやりたい本能を形成しなければなりません.重複コードはプロジェクトの悪い味に属するため、プロジェクト全体の品質が低下し、プロジェクトのメンテナンス性と拡張性に直接影響します.
考えてみてください.このプロジェクトが非常に膨大で、この基礎コンポーネントが何百ものコンポーネントに参照されているほど膨大で、いつこのコンポーネントのファイル名や移動パスを変更するかは、災害になります.
このため、vueにおいてグローバル登録の方法が提供されている.一度登録するだけで、残りのコンポーネントの最初のステップと2番目のステップのコードは、グローバル登録後にビューで直接使用できるため、直接削除できます.

// main.js     ，            
import HelloWorld from 'your/component/path'

Vue.component('HelloWorld', HelloWorld)

new Vue({
    ...
})

しかし、この手動グローバル登録の単一コンポーネントにも問題があります.

自動化が不十分で、コンポーネント数が多いと手動で登録することが負担になる

ここで子供靴たちは、vueで自動グローバル登録コンポーネントを実現する方法を考えることができます.
あとに書く
コンポーネントシステムに含まれる内容はかなり豊富で、一言では完全とは言えないので、ここではコンポーネントの最も基礎的な使用と登録、および実践で直面する問題だけを説明します.
次の記事では,サブコンポーネントおよびその上でデータ伝達を行う関連知識について詳細に説明するが,同様に理論が主である.基礎編としての最後の一編でもあります~