Vue コンポーネントの構成構造とコンポーネント登録の詳細

1. コンポーネントの構成

通常、アプリケーションはネストされたコンポーネントツリーとして構成されます。

たとえば、ヘッダー、サイドバー、コンテンツ領域などのコンポーネントがあり、それぞれにナビゲーションリンクやブログ投稿などの他のコンポーネントが含まれている場合があります。

テンプレートで使用するには、まずこれらのコンポーネントを登録して、 Vue認識できるようにする必要があります。コンポーネント登録には、グローバル登録とローカル登録の 2 種類があります。

これまでのところ、コンポーネントはすべてVue.componentを通じてグローバルに登録されています。

Vue.component('コンポーネント名', {
  // ... オプション ...
})

グローバルに登録されたコンポーネントは、登録後、コンポーネントツリー内のすべての子コンポーネントのテンプレートを含め、新しく作成されたVueルートインスタンス ( new Vue経由) で使用できます。

2. コンポーネント名

コンポーネントを登録するときは、必ず名前を付ける必要があります。たとえば、グローバルに登録すると次のようになります。

Vue.component('コンポーネント名', { /* ... */ })

コンポーネント名はVue.componentの最初のパラメータです。

2.1 コンポーネントの命名

コンポーネント名を定義する方法は 2 つあります。

ハイフンで区切られた名前: my-component-name
名前の最初の文字を大文字にします: MyComponentName

ハイフンで区切られた名前

Vue.component('コンポーネント名', { /* ... */ })

（ハイフンで区切られた名前）を使用してコンポーネントを定義する場合、例： <my-component-name></my-component-name>

最初の文字を大文字にする

Vue.component('MyComponentName', { /* ... */ })

(最初の文字を大文字にする) を使用してコンポーネントを定義する場合、カスタム要素を参照するときにどちらかの命名規則を使用できます。つまり、 <my-component-name>と<MyComponentName>両方が許容されます。

注:ただし、DOM 内で直接使用される場合 (つまり、文字列以外のテンプレートの場合)、ハイフンで区切られた名前のみが有効です。

3. グローバル登録

グローバル登録では、Vue.component を使用してコンポーネントを作成します。

ジャワ
Vue.component('コンポーネント名', {
  // ... オプション...
})

これらのコンポーネントはグローバルに登録されています。つまり、登録後に新しく作成されたVueルートインスタンス ( new Vue ) のテンプレートで使用できるということです。

例えば：

<div id="アプリ">
  <コンポーネント-a></コンポーネント-a>
  <コンポーネント-b></コンポーネント-b>
  <コンポーネント-c></コンポーネント-c>
</div>

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

新しい Vue({ el: '#app' })

ただし、実際のプロジェクトではグローバル登録はあまり使用されません。

4. 部分登録

グローバル登録は最適ではないことがよくあります。たとえば、 webpackのようなビルドシステムを使用する場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントを使用しなくなった場合でも、最終ビルドにそのコンポーネントが引き続き含まれることになります。その結果、ユーザーがダウンロードしなければならないJavaScriptの量が不必要に増加します。

このような場合は、プレーンなJavaScriptオブジェクトを介してコンポーネントを定義できます。

ComponentA = {
    テンプレート: `<p>hello</p>`
  }
コンポーネントB = {
  テンプレート: `<p>world</p>`
}

次にcomponentsオプションで使用するコンポーネントを定義します。

新しいVue({
  el: '#app',
  コンポーネント:
    'コンポーネント-a': コンポーネントA、
    'コンポーネント-b': コンポーネントB
  }
})

componentsオブジェクト内の各propertyでは、 property名はカスタム要素の名前であり、 property値はこのコンポーネントのオプションオブジェクトです。

もちろん、実際の開発プロセスでは、モジュールシステムを使用してさらに多くのコンポーネントを登録しますが、これについては後で紹介します。

Vueコンポーネントの構成構造とコンポーネント登録の詳細についての記事はこれで終わりです。Vueコンポーネントの構成構造とコンポーネント登録に関するより関連のある内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMを応援してください！

以下もご興味があるかもしれません: