# コンポーネントの登録

このページはコンポーネントの基本を読み終えている事を想定しています。もし読み終えていなければ先にそちらをお読みください。

# コンポーネント名

コンポーネントを登録する際は、必ず名前をつけてください。例えば、グローバル登録の場合は以下のようになります:

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

1
2
3
4
5

app.component の第一引数がコンポーネント名になります。上記の例では、"my-component-name" がコンポーネント名です。

コンポーネントに付ける名前は使用箇所によって異なります。DOM を直接操作する場合 (文字列テンプレートや単一ファイルコンポーネントを除く) は、W3C rules (opens new window) に従ったカスタムタグ名を強く推奨します:

全て小文字
ハイフンを含める (複数の単語をハイフンを用いて繋げる)

こうする事で、既に存在するそして将来的に定義される HTML 要素とのコンフリクトを回避する助けになります。

その他のコンポーネント名の推奨項目はスタイルガイドで確認することができます。

# 命名のケース (Name Casing)

コンポーネントを文字列テンプレートか単一ファイルコンポーネントで定義する際は、コンポーネント名に二つの命名規則があります:

# ケバブケース

app.component('my-component-name', {
  /* ... */
})

1
2
3

コンポーネントをケバブケースで定義する場合は、そのカスタム要素を参照する際も <my-component-name> のようにケバブケースを用いなければなりません。

# パスカルケース

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

1
2
3

コンポーネントをパスカルケースで定義する場合は、そのカスタム要素を参照する際どちらのケースも用いることができます。<my-component-name> と <MyComponentName> のどちらも利用可能です。ですが、DOM 内で直接使用する場合 (つまり、文字列テンプレート以外の場合) はケバブケースの方が適している点に注意してください。

# グローバル登録

ここまでは app.component だけを使ってコンポーネントを作成しました:

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

1
2
3

これらのコンポーネントはアプリケーションへの グローバル登録 とされています。つまり、あらゆるコンポーネントインスタンスのテンプレート内で使用できます:

const app = Vue.createApp({})

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

app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

1
2
3
4
5

これはすべてのサブコンポーネントにも当てはまります、つまりこれらの3つのコンポーネントすべてが 相互に使用 することができます。

# ローカル登録

グローバル登録はしばしば理想的ではありません。例えば、Webpack のようなビルドシステムを利用した場合、全てのコンポーネントをグローバル登録すると、使用していないコンポーネントも最終ビルドに含まれてしまいます。これはユーザーがダウンロードしなければならない JavaScript の量を不必要に増やしてしまう事になります。

以下のケースでは、プレーン JavaScript としてコンポーネントを定義することができます:

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

1
2
3
4
5
6
7
8
9

次に components オプション内に使用したいコンポーネントを定義します:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

1
2
3
4
5
6

components オブジェクト内のそれぞれのプロパティは、キーがカスタム要素の名前になり、値はコンポーネントのオプションオブジェクトが含まれます。

ローカル登録されたコンポーネントはサブコンポーネントでは利用 できない という点に注意してください。例えば、ComponentA を ComponentB 内で使用可能にしたいときは、以下のように使用する必要があります:

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}

1
2
3
4
5
6
7
8
9
10

または、Babel と Webpack のようなものを用いて ES2015 モジュールを利用している場合は、このようになります:

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}

1
2
3
4
5
6
7
8

ES2015 以降の場合、ComponentA のような変数名をオブジェクト内に配置することは ComponentA: ComponentA の省略記法にあたり、変数の名前は次のどちらも意味することに注意して下さい:

テンプレート内で使用されるカスタム要素名
コンポーネントオプションを含む変数の名前

# モジュールシステム

もし import/require を使用したモジュールシステムを使わないのであれば, このセクションはスキップすることができます。そうでなければ、いくつかのインストラクションとコツを教えます。

# モジュールシステム内のローカル登録

もしまだこの記事を読んでいるということは、Webpack や Babel のようなモジュールシステムを利用している可能性が高いでしょう。このような場合は、それぞれのコンポーネントを独自のファイルに持つ components ディレクトリを作成することをお勧めします。

次にローカル登録をする前に、使用するコンポーネントごとにインポートする必要があります。例えば、ComponentB.js もしくは ComponentB.vue ファイルの場合:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  }
  // ...
}

1
2
3
4
5
6
7
8
9
10

これで ComponentA と ComponentC が ComponentB のテンプレート内で利用できるようになりました。

← コンポーネントの基本プロパティ →