Vue ローカルコンポーネント

これまでのコンポーネントの導入方法では、プロジェクト内のすべての *.vue ファイルからアクセスできる状態でした。
コンポーネントはローカル（Local）に設定することができ、その場合、特定の *.vue ファイル内でのみアクセス可能になります。

1. グローバルコンポーネント

これまで main.js の中でコンポーネントをインポートしていた方法は、そのプロジェクト内の他のすべての *.vue ファイルの <template> 内でコンポーネントを利用できるようにするものです。

1.1 実装例

現在の main.js のセットアップでは、CompOne.vue コンポーネントが CompTwo.vue と App.vue の両方で利用可能であることを示します。

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'

const app = createApp(App)

// グローバル登録
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)

app.mount('#app')

2. ローカルコンポーネント

main.js に含める代わりに、*.vue ファイルの <script> タグ内で直接コンポーネントをインポートすることができます。
コンポーネントを *.vue ファイル内で直接インポートした場合、そのコンポーネントはそのファイル内からのみアクセス可能なローカルなものとなります。

2.1 実装例

CompOne.vue を App.vue のローカルコンポーネントとし、そこだけでアクセスできるようにするために、main.js から削除します。

main.js:

import { createApp } from 'vue'
import App from './App.vue'
// CompOne のインポートを削除
import CompTwo from './components/CompTwo.vue'

const app = createApp(App)

// comp-one のグローバル登録を削除
app.component('comp-two', CompTwo)

app.mount('#app')

そして、代わりに App.vue の <script> タグ内で直接 CompOne.vue をインポートします。

App.vue:

<template>
  <h3>ローカルコンポーネント</h3>
  <p>CompOne.vue はローカルコンポーネントであり、App.vue 内でしか使用できません。</p>
  <comp-one />
  <comp-two />
</template>

<script> 
  import CompOne from './components/CompOne.vue';

  export default {
    // ローカルコンポーネントとして登録
    components: {
      'comp-one': CompOne
    }
  }
</script>

これで、CompOne.vue コンポーネントは App.vue 内でのみ利用可能になりました。