Vueのコンポーネントを操作するための初心者のガイド

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

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

キーポイント

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

vue

でコンポーネントを作成する方法

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

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

コンポーネントの名前は

です。次のように使用できます：my-counter

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

また、上記の例では、オブジェクトをリテラルに戻す関数（オブジェクトリテラル自体ではなく）であることに気付くかもしれません。これの目的は、コンポーネントの各インスタンスに、他のすべてのインスタンスとグローバルなインスタンスを共有することなく、独自のデータオブジェクトを持たせることです。 my-custom-component MyCustomComponentコンポーネントテンプレートを定義する方法はいくつかあります。上記では、テンプレートリテラルを使用しましたが、DOM内のまたはテンプレートを備えたマーカーを使用することもできます。テンプレートを定義するさまざまな方法の詳細については、こちらをご覧ください。

単一のファイルコンポーネントdata

より複雑なプロジェクトでは、グローバルコンポーネントがすぐに管理が困難になる可能性があります。この場合、単一のファイルコンポーネントを使用するようにアプリケーションを設計することは理にかなっています。名前が示すように、これらは

、.vue <template></template>を含む拡張機能を備えた単一のファイルです。

およびMyCounterコンポーネントは次のようになる場合があります

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

ご覧のとおり、単一のファイルコンポーネントを使用する場合、それらを必要とするコンポーネントに直接インポートして使用できます。

このガイドでは、

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

Vue.component()単一ファイルコンポーネントを使用するには、多くの場合、構築ステップ（たとえば、Vue CLIの使用）が含まれます。詳細については、このVueシリーズで「Vue Cli Getsing Guide」をチェックしてください。

小道具

を介してデータをコンポーネントに転送します プロップを使用すると、親コンポーネントから子コンポーネントにデータを渡すことができます。これにより、コンポーネントをより小さなチャンクに分割して、特定の機能を処理できます。たとえば、ブログコンポーネントがある場合は、著者の詳細、詳細（タイトル、ボディ、画像）、コメントなどの情報を表示することができます。

これらを子供のコンポーネントに分割して、各コンポーネントが特定のデータを処理し、コンポーネントツリーを次のようにすることができます。

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

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

すべてのデータは親コンポーネントから渡されるため、次のようになる場合があります。

上記の例コンポーネントでは、著者の詳細を定義し、情報を投稿します。次に、子コンポーネントを作成する必要があります。チャイルドコンポーネントに名前を付けましょう

。したがって、私たちのHTMLテンプレートは次のようになります：

<code class="language-vue"><template>
  <div>{{ count }}</div>
</template>

</code>

著者オブジェクトを子どものコンポーネントに渡しますauthor-detail。ここでは、違いに注意を払う必要があります。チャイルドコンポーネントでは、

は、親コンポーネントからデータを受け取る小道具名です。受け取りたいデータは

<code class="language-html"><blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></code>

と呼ばれ、親コンポーネントで定義します。

このデータにアクセスするには、ownerコンポーネントで小道具を宣言する必要があります：owner author

プロップを渡すときに検証を有効にして、正しいデータが渡されるようにすることもできます。これは、Reactのプロパティに似ています。上記の例で検証を有効にするには、コンポーネントを次のように変更します。

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

<code class="language-javascript">new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</code>

VUE文書には、小道具検証を理解するために使用できる公式ガイドがあります。

イベントバスを介して、子供のコンポーネントから親コンポーネントへの子供のコンポーネントからの通信

<code class="language-html"><div>
  <author-detail :owner="author"></author-detail>
</div></code>

イベントは、選択したイベントが発生したときにトリガーされるラッパーメソッドを作成することにより処理されます。レビューするには、最初のカウンターの例に基づいて拡張して、ボタンがクリックされるたびに増加するようにしましょう。

私たちのコンポーネントは次のようになります：

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

および私たちのテンプレート：

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

この希望は十分に簡単です。ご覧のとおり、ボタンがクリックされるたびにカスタムonClickメソッドをトリガーするためにincreaseイベントに接続しています。次に、increaseメソッドは、countデータ属性を増加させます。次に、例を展開し、カウンターボタンを別のコンポーネントに移動し、親コンポーネントにカウントを表示しましょう。イベントバスを使用してこれを行うことができます。

イベントバスは、子コンポーネントから親コンポーネントに通信したい場合に非常に便利です。これは、親コンポーネントから子コンポーネントまでのデフォルトの通信方法に反します。アプリケーションがVuexを必要としないほど大きくない場合は、イベントバスを使用できます。 （このVueシリーズの「Vuex Getsing Guide」で詳細を読むことができます。）

したがって、私たちがしなければならないことは次のとおりです。カウントは親コンポーネントで宣言され、子コンポーネントに渡されます。次に、チャイルドコンポーネントで、countの値を増やし、親コンポーネントの値が更新されていることを確認します。

アプリコンポーネントは次のようになります：

<code class="language-vue"><template>
  <div>{{ count }}</div>
</template>

</code>

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

<code class="language-html"><blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></code>

テンプレートは次のようになります

そのような値を増やそうとすると、機能しません。それが機能するためには、子供のコンポーネントからイベントを発行し、

<code class="language-javascript">new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</code>

の新しい値を送信し、親コンポーネントでこのイベントを聞く必要があります。

count最初に、新しいVueインスタンスを作成し、

：

に設定します eventBus

コンポーネントでイベントバスを使用できるようになりました。サブコンポーネントは次のようになります：

<code class="language-html"><div>
  <author-detail :owner="author"></author-detail>
</div></code>

イベント

<code class="language-javascript">Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</code>

メソッドが呼び出されるたびに。メインコンポーネントのイベントを聞き、放出されたイベントから得られる価値に

を設定する必要があります。 increment count Vueの

ライフサイクルメソッドを使用して、コンポーネントが取り付けられてイベントバスをセットアップする前に、コンポーネントに接続していることに注意してください。

<code class="language-javascript">Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</code>

アプリケーションが複雑でない場合は、イベントバスを使用するのは良いことですが、アプリケーションが成長するにつれて、代わりにVuexを使用することをお勧めします。 created

スロットのネストされたコンポーネントで内容を使用します

これまで見た例では、コンポーネントは自己閉鎖要素です。ただし、有用な方法でグループ化できるコンポーネントを作成するには、HTML要素のように互いにネストできるようにする必要があります。

エンドタグ付きのコンポーネントを使用してコンテンツを内部に入れようとすると、Vueが飲み込んだことがわかります。コンポーネントの開始タグとエンドタグの間のすべては、コンポーネント自体のレンダリング出力に置き換えられます。

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

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

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

次に、テンプレートは次のようになります

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

コンポーネントのコンテンツは、

<code class="language-vue"><template>
  <div>{{ count }}</div>
</template>

</code>

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

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

<code class="language-html"><blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></code>

結論

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

（長すぎて擬似オリジナルの目標と一致しないため、FAQの部分は省略されています。FAQコンテンツの一部は必要に応じて書き直すことができますが、元の意図は変更せずに保つ必要があります。）

以上がVueのコンポーネントを操作するための初心者のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。