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を応援してください！