Vueのコンポーネント化

コンポーネント化はVueの本質であり、Vueはコンポーネントを1つずつ構成します。Vueのコンポーネント化されたデザインには多くのコンテンツが含まれています。インタビューを受けたとき、Vueのコンポーネント化についてのあなたの理解について教えてください。現時点では、開始する方法がない可能性があるため、Vueのコンポーネント化についての私の個人的な理解は次のとおりです。

コンポーネントの分類

一般的に、コンポーネントは大きく3つのカテゴリに分類できます。

ページレベルのコンポーネント。
ビジネスで再利用可能な基本コンポーネント。
ビジネスとは関係のない独立したコンポーネント。

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

ページレベルのコンポーネント（通常はpagesディレクトリの.vueコンポーネント）は、プロジェクト全体を構成する大きなページです。通常、外部インターフェースはありません。私たちが通常開発するとき、私たちは主にそのようなコンポーネントを書きます。以下に示すように：ページの下のHome.vue（ホームページ）とAbout.vue（私たちについて）は両方とも独立したページであり、独立したコンポーネントです。

  pages
  ├─ About.vue
  └─ Home.vue

ビジネスで再利用可能な基本コンポーネント

このタイプのコンポーネントは通常、ビジネスの各ページで再利用されるコンポーネントです。このタイプのコンポーネントは通常、コンポーネントディレクトリに書き込まれ、インポートによって各ページで使用されます。このタイプのコンポーネントは通常、テイクアウトの各ページで使用されるスコアリングシステムなどの特定の機能を実装します。この部分はスコアリング関数を実現でき、独立したビジネスコンポーネントとして記述できます。たとえば、以下のコンポーネントのStar.vueはビジネスコンポーネントです。コンポーネントのこの種の書き込みは、通常、一般的に使用されるコンポーネントが含まprops、slotおよびカスタムイベントを。

  components
  └─ Star.vue

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

このようなコンポーネントは通常、ビジネス機能とは関係のない独立したコンポーネントです。このようなコンポーネントは通常、さまざまなビジネスコンポーネントまたはページコンポーネントの基本コンポーネントとして使用されます。市場で人気のあるElementUIとiviewに含まれているコンポーネントは、すべて独立したコンポーネントです。リッチテキストエディタなどの自己定義の独立したコンポーネントである場合、通常はutilsディレクトリに書き込まれます。

コンポーネントの書き込み

コンポーネントの分類について説明した後、コンポーネントの準備について説明しましょう。コンポーネントを作成するには、どのような要素を考慮する必要があります。まず、コンポーネントの2つの最も重要なコンポーネントは、データとイベントである必要があります。さらに、コンポーネント開発ではスケーラビリティを考慮する必要があり、Vueでの拡張はスロットを介して実装されます。
データとは主に、データと小道具を指します。その中で、データは主にコンポーネント内のデータ表示、通常は関数に使用されます。そして、propは、非常に重要なAPIである、データ検証、データ拡張などを含む外部データを受信することです。

イベント：コンポーネントのイベントは、通常の要素のバインディングイベントとは異なります。親コンポーネントでトリガーされるか、コンポーネントの内部要素でトリガーされるかに関係なく、コンポーネントイベントをトリガーする方法。

スロット：主にコンポーネントの拡張に使用されます。これは、コンポーネント開発にとって非常に重要なAPIでもあります。

要約すると、コンポーネント開発には3つの非常に重要なAPIがあります。これらは、冗談めかしてコンポーネント開発の3つの要素、prop、event、slotと呼ぶことができます。次に、コンポーネント開発の観点から、これら3つのAPIの使用について個別に説明します。単純な使い方ではありません。

プロパティの小道具

propコンポーネントが受け取ることができる構成可能なプロパティを定義します。主に、親コンポーネントから渡されたデータを受信するために使用されます。小道具がプロパティを受け取るとき、それは配列またはオブジェクトの形式にすることができます。型チェックやその他のチェックが含まれていない場合は、配列形式を直接使用できます。チェックが含まれている場合は、オブジェクト形式を使用することをお勧めします。
配列形式：

props:['name','age']

オブジェクトフォーム：オブジェクトフォームを使用して、データのタイプ、データが必要かどうか、およびその他の特性を確認できます。これは、コンポーネント化された開発にとって非常に有益です。
Child.vueはコンポーネントを定義します

<template>
  <div class="container">
    姓名：{
    
    {name}}
    年龄：{
    
    {age}}
    <button :class = "type">点击</button>
  </div>
</template>

<スクリプト>
export default { name：'Child'、props：{ name：{ type：String、require：true }、age：{ type：Number }、type：{ //校验：喜型是否是成功、警告。和プライマリ之一バリ：関数（値） { リターン（[ '成功'、'警告'、'プライマリ' ] .indexOf（値）） - >

1
}
}
}
}
</ script >

Parent.vueはコンポーネントを使用します

<Child :name = name  :age = age :type = type></Child>

コンポーネントを定義する場合、nameはString型であり必須であり、ageはnumber型であり必須ではありません。タイプは、成功、警告、プライマリのいずれかである必要があります。

カスタムイベント

コンポーネントで定義されたイベントをトリガーする方法：定義した
子コンポーネントにクリックイベントを追加する必要があるとします。この時点で、通常、コンポーネント内のボタンの$ emitを介し
てイベントをトリガーし、親でリッスンします。成分。
コンポーネントの$ emitを使用してイベントを定義します：
Child.vue

<template>
  <div class="container">
    姓名：{
   
   {name}}
    年龄：{
   
   {age}}
    <!-- 触发事件 -->
    <button @click ="$emit('onClick','自定义事件')" :class = "type">点击</button>
  </div>
</template>

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

 <Child @onClick = 'handleClick' :age = age :type = type></Child>

スロット

私たちが定義するコンポーネントは通常、さまざまな場所で使用されますが、すべての使用シナリオに対応できるとは限りません
。一部の機能を拡張する必要がある場合もあります。このとき、スロットが必要です。1文の説明スロット：コンポーネントに新しいコンテンツを挿入するために使用されます。
たとえば、先ほど定義した子コンポーネントに、段落を挿入する必要があります。次に、この時点でスロットを使用する必要があります。
Child.vueのスロットを使用する

<template>
  <div class="container">
    姓名：{
   
   {name}}
    年龄：{
   
   {age}}
    <button @click ="$emit('onClick','自定义事件')" :class = "type">点击</button>
    <slot></slot>
  </div>
</template>

Parent.vueの拡張関数。段落を挿入します。

<template>
  <div class="container">
    <Child @onClick = 'handleClick' :age = age :type = type>
      <div>这是通过slot插入的一段话</div>
    </Child>
  </div>
</template>

上に示したように、Child.vueでslotが使用され、Parent.vueでCHildが使用されている場合、段落が挿入されます。
機能の拡張を実現しました。もちろん、さらに多くの機能を拡張する必要がある場合は、ここでは特に紹介されていない名前付きスロットを使用できます。

総括する：

コンポーネントの分類：

ページレベルのコンポーネント
ビジネスで再利用可能な基本コンポーネント
ビジネスに関係のない独立した機能コンポーネント

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

propコンポーネントのプロパティを定義するために使用されます。
カスタムイベントは、コンポーネントのイベントをトリガーするために使用されます。
slotコンポーネント機能の拡張に使用されます。

これらの3つのAPIを合理的に使用することで、コンポーネントの開発をより適切に支援できます。