vue.jsのコンポーネントアーキテクチャにより、ユーザーインターフェイスの構築が効率的かつ便利になります。アプリケーションをより小さく、再利用可能なコンポーネントに分解し、これらのコンポーネントでより複雑な構造を構築することができます。

このガイドは、Vueコンポーネントの高度な紹介を提供します。コンポーネントの作成方法、コンポーネント間でデータを渡す方法（小道具とイベントバスを介して）、およびVueの<slot></slot>要素を使用してコンポーネント內(nèi)で追加のコンテンツをレンダリングする方法について説明します。各例には、実行可能なCodepenデモが付屬しています。

キーポイント

• Vueのコンポーネントアーキテクチャは、UIを再利用可能で管理しやすいスニペットに分解し、それによってコードの再利用性と組織を高めるのに役立ちます。
• コンポーネントは、Vue.componentまたは単一ファイルコンポーネントでローカルに使用できます。
• データは、小道具を使用してサブコンポーネントに渡すことができ、コンポーネントツリーのデータを管理および渡すための明確で構造化された方法を提供します。
• イベントバスを使用して、子供のコンポーネントから親コンポーネントまでの通信を効果的に管理し、子コンポーネントがコンポーネント階層にデータを送信できるようにします。
• vueの<slot></slot>要素は、コンポーネント內(nèi)のネストコンテンツをより柔軟にし、親コンポーネントからコンテンツを受信できるようにします。これは、フォールバックコンテンツで上書きできます。

vue

コンポーネントは、本質的に再利用可能なVUEインスタンスである名前です。 VUEアプリケーションでコンポーネントを作成する方法はたくさんあります。たとえば、小規(guī)模から中規(guī)模のプロジェクトでは、次のようにVue.componentメソッドを使用してグローバルコンポーネントを登録できます。

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>コンポーネントの名前は
です。次のように使用できます：my-counter

コンポーネントに名前を付けるときは、Kebab-Case（）またはPascal-Case（<div>
  <my-counter></my-counter>
</div></pre> kebabケースタグ名のみが有効です。 

また、上記の例では、オブジェクトをリテラルに戻す関數(shù)（オブジェクトリテラル自體ではなく）であることに気付くかもしれません。これの目的は、コンポーネントの各インスタンスに、他のすべてのインスタンスとグローバルなインスタンスを共有することなく、獨自のデータオブジェクトを持たせることです。 my-custom-component
MyCustomComponentコンポーネントテンプレートを定義する方法はいくつかあります。上記では、テンプレートリテラルを使用しましたが、DOM內(nèi)のまたはテンプレートを備えたマーカーを使用することもできます。テンプレートを定義するさまざまな方法の詳細については、こちらをご覧ください。 
単一のファイルコンポーネントdata
より複雑なプロジェクトでは、グローバルコンポーネントがすぐに管理が困難になる可能性があります。この場合、単一のファイルコンポーネントを使用するようにアプリケーションを設計することは理にかなっています。名前が示すように、これらは
、.vue <template>を含む</pre>拡張機能を備えた単一のファイルです。
およびMyCounterコンポーネントは次のようになる場合があります

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>ご覧のとおり、単一のファイルコンポーネントを使用する場合、それらを必要とするコンポーネントに直接インポートして使用できます。 

このガイドでは、
メソッドを使用してコンポーネントを登録して、すべての例を表示します。 

Vue.component()単一ファイルコンポーネントを使用するには、多くの場合、構築ステップ（たとえば、Vue CLIの使用）が含まれます。詳細については、このVueシリーズで「Vue Cli Getsing Guide」をチェックしてください。 
小道具
を介してデータをコンポーネントに転送します
プロップを使用すると、親コンポーネントから子コンポーネントにデータを渡すことができます。これにより、コンポーネントをより小さなチャンクに分割して、特定の機能を処理できます。たとえば、ブログコンポーネントがある場合は、著者の詳細、詳細（タイトル、ボディ、畫像）、コメントなどの情報を表示することができます。 
これらを子供のコンポーネントに分割して、各コンポーネントが特定のデータを処理し、コンポーネントツリーを次のようにすることができます。

コンポーネントを使用することの利點をまだ信じていない場合は、この組み合わせがどれほど役立つかを理解してください。將來このコードを再訪したい場合は、ページの構築方法と、どの機能（つまり、どのコンポーネント）を探す必要があるかをすぐに明確にします。また、インターフェイスを組み合わせるこの宣言的な方法により、コードベースに精通していない人が迅速に開始し、効率を向上させることが容易になります。 
<div>
  <my-counter></my-counter>
</div></pre>すべてのデータは親コンポーネントから渡されるため、次のようになる場合があります。

上記の例コンポーネントでは、著者の詳細を定義し、情報を投稿します。次に、子コンポーネントを作成する必要があります。チャイルドコンポーネントに名前を付けましょう
。したがって、私たちのHTMLテンプレートは次のようになります：
<template>
  <div>{{ count }}</div>
</template>

<??></pre>
著者オブジェクトを子どものコンポーネントに渡しますauthor-detail。ここでは、違いに注意を払う必要があります。チャイルドコンポーネントでは、
は、親コンポーネントからデータを受け取る小道具名です。受け取りたいデータは
<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>と呼ばれ、親コンポーネントで定義します。 

このデータにアクセスするには、ownerコンポーネントで小道具を宣言する必要があります：owner
author
プロップを渡すときに検証を有効にして、正しいデータが渡されるようにすることもできます。これは、Reactのプロパティに似ています。上記の例で検証を有効にするには、コンポーネントを次のように変更します。

author-detail間違った小道具の種類を渡すと、以下に示したものと同様のコンソールにエラーが表示されます。

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>VUE文書には、小道具検証を理解するために使用できる公式ガイドがあります。 

イベントバスを介して、子供のコンポーネントから親コンポーネントへの子供のコンポーネントからの通信
<div>
  <author-detail :owner="author"></author-detail>
</div></pre>
イベントは、選択したイベントが発生したときにトリガーされるラッパーメソッドを作成することにより処理されます。レビューするには、最初のカウンターの例に基づいて拡張して、ボタンがクリックされるたびに増加するようにしましょう。 
私たちのコンポーネントは次のようになります：
Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
および私たちのテンプレート：
<div>
  <my-counter></my-counter>
</div></pre>
この希望は十分に簡単です。ご覧のとおり、ボタンがクリックされるたびにカスタムonClickメソッドをトリガーするためにincreaseイベントに接続しています。次に、increaseメソッドは、countデータ屬性を増加させます。次に、例を展開し、カウンターボタンを別のコンポーネントに移動し、親コンポーネントにカウントを表示しましょう。イベントバスを使用してこれを行うことができます。 
イベントバスは、子コンポーネントから親コンポーネントに通信したい場合に非常に便利です。これは、親コンポーネントから子コンポーネントまでのデフォルトの通信方法に反します。アプリケーションがVuexを必要としないほど大きくない場合は、イベントバスを使用できます。 （このVueシリーズの「Vuex Getsing Guide」で詳細を読むことができます。）
したがって、私たちがしなければならないことは次のとおりです。カウントは親コンポーネントで宣言され、子コンポーネントに渡されます。次に、チャイルドコンポーネントで、countの値を増やし、親コンポーネントの値が更新されていることを確認します。 
アプリコンポーネントは次のようになります：
<template>
  <div>{{ count }}</div>
</template>

<??></pre>
その後、子コンポーネントでは、小道具を通じてカウントを受け取り、それを増やす方法を持ちたいと考えています。子供のコンポーネントにcountの値を表示したくありません。子コンポーネントからインクリメントして、親コンポーネントに反映させたいだけです。

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>テンプレートは次のようになります

そのような値を増やそうとすると、機能しません。それが機能するためには、子供のコンポーネントからイベントを発行し、
new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>の新しい値を送信し、親コンポーネントでこのイベントを聞く必要があります。 

count最初に、新しいVueインスタンスを作成し、
：
に設定します
eventBus
コンポーネントでイベントバスを使用できるようになりました。サブコンポーネントは次のようになります：
<div>
  <author-detail :owner="author"></author-detail>
</div></pre>

イベント
Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>メソッドが呼び出されるたびに。メインコンポーネントのイベントを聞き、放出されたイベントから得られる価値に
を設定する必要があります。
increment
count Vueの
ライフサイクルメソッドを使用して、コンポーネントが取り付けられてイベントバスをセットアップする前に、コンポーネントに接続していることに注意してください。 
Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</pre>
アプリケーションが複雑でない場合は、イベントバスを使用するのは良いことですが、アプリケーションが成長するにつれて、代わりにVuexを使用することをお勧めします。 created
スロットのネストされたコンポーネントで內(nèi)容を使用します

これまで見た例では、コンポーネントは自己閉鎖要素です。ただし、有用な方法でグループ化できるコンポーネントを作成するには、HTML要素のように互いにネストできるようにする必要があります。 
エンドタグ付きのコンポーネントを使用してコンテンツを內(nèi)部に入れようとすると、Vueが飲み込んだことがわかります。コンポーネントの開始タグとエンドタグの間のすべては、コンポーネント自體のレンダリング出力に置き換えられます。

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>幸いなことに、Vueのスロットにより、任意の値をコンポーネントに渡すことができます。これは、親コンポーネントから、DOM要素から他のデータまで、子コンポーネントまで何でもかまいません。彼らがどのように機能するか見てみましょう。 

コンポーネントのスクリプト部分は次のようになります。

次に、テンプレートは次のようになります
<div>
  <my-counter></my-counter>
</div></pre>
コンポーネントのコンテンツは、
<template>
  <div>{{ count }}</div>
</template>

<??></pre>要素ラベル間でレンダリングされます。親コンポーネントが何も注入しない場合に備えて、フォールバックコンテンツを使用することもできます。 

<list>
<slot>親コンポーネントからコンテンツがない場合、フォールバックコンテンツがレンダリングされます。 
<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
結論

これは、VUEでコンポーネントを使用するための高レベルの紹介です。 VUEでコンポーネントを作成する方法、小道具を介して親から子供へのコンポーネントへの通信方法、イベントバスでの子供から親コンポーネントへの通信方法を検討しました。その後、スロットを見ることで、コンポーネントを便利な方法で結合する便利な方法になります。このチュートリアルが便利だと思います。 

（長すぎて擬似オリジナルの目標と一致しないため、FAQの部分は省略されています。FAQコンテンツの一部は必要に応じて書き直すことができますが、元の意図は変更せずに保つ必要があります。） 
以上がVueのコンポーネントを操作するための初心者のガイドの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。