Vue.jsコンポーネント

コンポーネントは、インターフェイスの単一の独立したユニットです。独自の状態、マークアップ、スタイルを持つことができます。

コンポーネントは、インターフェイスの単一の独立したユニットです。独自の状態、マークアップ、スタイルを持つことができます。

コンポーネントの使用方法

Vueコンポーネントは、主に4つの方法で定義できます。

コードで話しましょう。

1つ目は次のとおりです。

new Vue({
  /* options */
})

2番目は:

Vue.component('component-name', {
  /* options */
})

3つ目は、ローカルコンポーネントを使用することです。特定のコンポーネントからのみアクセス可能で、他の場所では利用できないコンポーネントです(カプセル化に最適)。

4番目は.vueファイル、別名単一ファイルコンポーネント

最初の3つの方法について詳しく見ていきましょう。

使用するnew Vue()またはVue.component()シングルページアプリケーション(SPA)ではなく、お問い合わせフォームやショッピングカートなど、一部のページでVue.jsを使用するアプリケーションを構築する場合のVueの標準的な使用方法です。または、Vueがすべてのページで使用されているが、サーバーがレイアウトをレンダリングしていて、HTMLをクライアントに提供すると、クライアントがビルドしたVueアプリケーションをロードします。

HTMLを構築するのがVueであるSPAでは、より便利な単一ファイルコンポーネントを使用するのが一般的です。

VueをDOM要素にマウントしてインスタンス化します。あなたが持っている場合<div id="app"></div>タグ、使用します:

new Vue({ el: '#app' })

で初期化されたコンポーネントnew Vue対応するタグ名がないため、通常はメインコンテナコンポーネントです。

アプリケーションで使用される他のコンポーネントは、Vue.component()。このようなコンポーネントを使用すると、アプリケーションにコンポーネントを複数回埋め込むことができるタグを定義したり、コンポーネントの出力をアプリケーションに指定したりできます。templateプロパティ:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({ el: ‘#app’ })

Tech Wiki Online!