Vueコンポーネント化開発

Vueのコンポーネント化
コンポーネント化はVueの真髄であり,Vueは1つ1つのコンポーネントから構成されている.Vueのコンポーネント化設計の内容はまた非常に多く、面接の時、Vueのコンポーネント化に対する理解を聞かれました.この場合は手がつけられない可能性もあるので,ここではVueのコンポーネント化に対する個人的な理解を説明する.
コンポーネントの分類
一般的に、コンポーネントは大きく3つに分けられます.

ページレベルのコンポーネント.

ビジネス上で多重化可能なインフラストラクチャ.

ビジネスに関係のない独立したコンポーネント.

ページレベルのコンポーネント
ページレベルのコンポーネントは、通常pagesディレクトリの下にある.vueコンポーネントは、プロジェクト全体を構成する大きなページです.一般的には対外的なインタフェースはありません.私たちが通常開発するときは、主にこのようなコンポーネントを作成します.以下に示す:pagesの下のHome.vue(ホームページ)とAbout.vue(私たちについて)などは独立したページであり、独立したコンポーネントでもあります.

  pages
  ├─ About.vue
  └─ Home.vue

ビジネス上の多重化可能なインフラストラクチャ
このクラスのコンポーネントは、通常、ビジネスで各ページに多重化されたコンポーネントであり、このクラスのコンポーネントは通常componentsディレクトリに書き込まれ、importを介して各ページで使用される.このようなコンポーネントは、通常、出前の各ページで使用されるスコアリングシステムなどの機能を実現します.この部分では、採点機能を実現し、独立したビジネスコンポーネントに書くことができます.例えば次のcomponentsのスターですvueはビジネスコンポーネントです.このようなコンポーネントの作成は、通常、コンポーネントでよく使用されるprops、slot、およびカスタムイベントなどに関連する.

  components
  └─ Star.vue

ビジネスに関係のない独立したコンポーネント
このようなコンポーネントは、通常、ビジネス機能に関係のない独立したコンポーネントです.このようなコンポーネントは、通常、各ビジネスコンポーネントまたはページコンポーネントで使用されるベースコンポーネントとして使用される.現在流行しているElementUIやiviewなどに含まれるコンポーネントはすべて独立したコンポーネントです.リッチテキストエディタなど、独自に定義された独立したコンポーネントの場合は、utilsディレクトリに書かれます.
コンポーネントの作成
コンポーネントの分類についてお話しし、次にコンポーネントの作成についてお話しします.コンポーネントを書くには、どのような要素を考慮する必要があります.まず、1つのコンポーネントで最も重要な2つは、データとイベントに違いありません.また、コンポーネント開発は拡張性を考慮し、vueであなたの拡張をslotで実現します.データは主にdataとpropを指します.ここでdataは主にコンポーネント内部のデータ表示に用いられ、通常は関数である.一方,propは外部データを受信し,データの検証,データの拡張など,非常に重要なAPIである.
イベント:コンポーネントのイベント(event)は、通常の要素にイベントをバインドするのとは異なります.コンポーネントイベントがどのようにトリガーされるか、親コンポーネントでトリガーされるか、コンポーネント内部の要素でトリガーされるか.
slot:主にコンポーネントの拡張に使用されます.同様にコンポーネント開発において非常に重要なAPIである.
以上のように,コンポーネント開発には3つの非常に重要なAPIがあり,コンポーネント開発の3要素:prop,event,slotと呼ぶことができる.次に,この3つのAPIの使用についてコンポーネント開発の観点からそれぞれ述べる.簡単に使うだけではありません.
プロパティproppropは、コンポーネントがどの構成可能な属性を受信できるかを定義する.主に親コンポーネントから伝達されたデータを受信するために使用されます.propsが属性を受信する場合は配列形式であってもよいし、オブジェクト形式であってもよい.タイプチェックに関係しない場合、または他のチェックに関連しない場合は配列形式を直接使用し、チェックに関連する場合はオブジェクト形式を使用することが望ましい.配列の形式:

props:['name','age']

≪オブジェクト形式|Object Format|emdw≫:データのタイプ、必須かどうか、およびその他のフィーチャーを検証するために、オブジェクトの形式を使用します.これはコンポーネント化開発に非常に有利である.Child.vue定義コンポーネント

export default {
  name:'Child',
  props:{
    name:{
      type:String,
      require:true
    },
    age:{
      type:Number
    },
    type:{
      //  ：   type   success,warning primary  。
      validator:function(value){
        return (['success','warning','primary'].indexOf(value)) > -1
      }
    }
  }
}

Parent.vueコンポーネントの使用

コンポーネントを定義する場合、nameはStringタイプで必須、ageはnumberタイプで非必須です.typeはsuccess,warning,primaryのいずれかでなければなりません.
カスタムイベント
コンポーネントで定義されたイベントをトリガーする方法:定義されたChildコンポーネントにクリックイベントを追加する必要があると仮定します.この場合、コンポーネント内部のbutton上で$emitを介してイベントをトリガーし、親コンポーネントでリスニングします.コンポーネントで$emitでイベントを定義:Child.vue

Parent.vueリスニングイベント

slot
私たちが定義したコンポーネントは通常、さまざまな場所で使用されますが、すべての使用シーンを満たすとは限らず、いくつかの機能の拡張が必要になる場合があります.この時はslotを使う必要があります.一言説明slot:コンポーネントに新しいコンテンツを挿入するために使用されます.例えば、私たちが定義したChildコンポーネントは、話を挿入する必要があります.では、この時はslotを使う必要があります.Child.vueでのslotの使用

Parent.vueでの拡張機能.話を挿入:

上に示すように、Child.vueではslotを使用し、Parent.vueでCHildを使用していると、一節挿入されます.機能の拡張を実現しました.もちろん、より多くの機能を拡張して名前付きスロットを使用する必要がある場合は、ここでは詳しく説明しません.
まとめ:
コンポーネントの分類:

ページレベルコンポーネント

トラヒック上で多重化可能な基礎コンポーネント

業務に関係のない独立機能コンポーネント

コンポーネント開発の3つの要素prop、カスタムイベント、slotは、コンポーネントを構成する3つの重要な要素である.

propは、コンポーネントの属性を定義するために使用される.

カスタムイベントは、コンポーネントのイベントをトリガーするために使用されます.

slotは、コンポーネント機能の拡張に使用される.

この3つのAPIを合理的に使用することで、コンポーネントの開発をよりよく支援できます.
転載先:https://www.cnblogs.com/yinhaiying/p/10985476.html