このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネント学ぶ方は、まずそちらをお読みください。
Vue のコンポーネントをテンプレートで使用する時は、それがどこで実装されているかを Vue に知らせるため、「登録」を行う必要があります。コンポーネントの登録方法には、グローバルとローカルの 2 つがあります。
グローバル登録
開発中の Vue アプリケーションでグローバルにコンポーネントを利用できるようにするには、以下に示す app.component() メソッドを使用します:
import { createApp } from 'vue'
const app = createApp({})
app.component(
// the registered name
'MyComponent',
// the implementation
{
/* ... */
}
)
SFC を使用する場合は、インポートした .vue ファイルを登録します:
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)
app.component() メソッドはチェーンにすることができます:
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)
グローバル登録したコンポーネントは、アプリケーション内の任意のコンポーネントのテンプレートで使用することができます:
<!-- これはアプリ内のどのコンポーネントでも動作します --> <ComponentA/> <ComponentB/> <ComponentC/>
これは、サブコンポーネントにも漏れなく適用されます。そのため、上の 3 つのコンポーネントはすべて 各コンポーネント内でも互いに 使える、ということになります。
ローカル登録
グローバル登録は便利な反面、以下に示すいくつかの欠点があります:
- グローバル登録では、未使用のコンポーネントを削除してくれるビルドシステムの処理 (いわゆる「ツリーシェイク」) が阻害されます。グローバル登録したコンポーネントは、最後までアプリのどこにも用いなかった場合でも、最終的なバンドルには含まれてしまいます。
- グローバル登録では、大規模なアプリケーションでの依存関係の分かりやすさが低下します。グローバル登録では、子コンポーネントを使っている親コンポーネントから、子コンポーネントの実装部分を探し出すことが難しくなります。きわめて多くのグローバル変数が使われている状況と同じように、これは長期的な保守性に影響を与える可能性があります。
ローカルでの登録を利用すると、登録したコンポーネントを使えるスコープが現在のコンポーネントのみに限定されます。これによって依存関係が分かりやすくなり、ツリーシェイクが働きやすくなります。
ローカル登録は、以下のように components オプションを使って行います:
でSFCを使用する場合<script setup>、インポートされたコンポーネントは登録なしでローカルで使用できます。
<script setup> import ComponentA from './ComponentA.vue' </script> <template> <ComponentA /> </template>
<script setup>を使わない場合は下記のように登録する必要があります。
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
オブジェクト内のプロパティごとcomponentsに、キーはコンポーネントの登録名になり、値にはコンポーネントの実装が含まれます。上記の例は、ES2015プロパティの省略形を使用しており、次と同等です。
export default {
components: {
ComponentA: ComponentA
}
// ...
}
ただし、 ローカル登録されたコンポーネントが子孫のコンポーネントでも利用できるようにはならないことに注意してください。上の場合、ComponentA は現在のコンポーネントのみで利用可能になり、その子や子孫のコンポーネントで利用可能になるわけではありません。
<script setup>を使用してコンポーネントをインポートした場合は、登録が必要ありません。インポートした時点でテンプレートでの使用が可能になります。
コンポーネント名での大文字・小文字の使い方
このガイドでは、コンポーネントを登録する際に PascalCase の名前を用いています。これは次の理由によります:
- PascalCase の名前は JavaScript の識別子として有効です。そのため、JavaScript でコンポーネントをインポートしたり登録したりするのが容易になります。また、IDE のオートコンプリートも働きやすくなります。
- テンプレートで
<PascalCase />を用いると、これがネイティブの HTML 要素ではなく、Vue のコンポーネントであることがより明確になります。また、Vue コンポーネントとカスタムの要素 (Web Components) を区別することも可能になります。
このスタイルは、SFC や文字列テンプレートを合わせて使う時に推奨されるスタイルです。ただし、DOM テンプレート解析の注意点 で説明しているように、DOM テンプレート内では PascalCase のタグが使えません。
幸いなことに、Vue は PascalCase で登録したコンポーネントから kebab-case 形式のタグへの解決をサポートしています。これにより、MyComponent として登録したコンポーネントは、<MyComponent> と <my-component> のどちらを使ってもテンプレート内で参照できます。そのため、テンプレートの出どころに関わらず、JavaScript のコンポーネント登録のコードには同じものを用いることができます。
