v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

コンポーネントの登録

最終更新日: 2019年7月22日

このページは コンポーネントの基本 を読まれていることが前提になっています。コンポーネントを扱った事のない場合はこちらのページを先に読んでください。

コンポーネント名

コンポーネントを登録するときは、いつでも名前が与えられます。例えば、グローバル登録の場合:

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

コンポーネント名は Vue.component の第一引数です。

コンポーネントの命名は、コンポーネントの使用箇所に左右されます。(文字列テンプレート、または単一ファイルコンポーネントではなく) DOM 上で直接コンポーネントを使用する場合は、W3C rules に従ったカスタムタグ名(全て小文字で、ハイフンが含まれていること)を推奨します。これは、既に存在する、そして将来定義される HTML 要素との衝突を防止するのに役立ちます。

スタイルガイドでは、コンポーネント名についてのその他の推奨項目を見ることができます。

命名のケース (Name Casing)

コンポーネント名を定義する時、2 つの選択肢があります:

ケバブケース (kebab-case)

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

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

パスカルケース (PascalCase)

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

パスカルケースでコンポーネントを定義する場合、そのカスタム要素の参照には、どちらのケースも用いることができます。これは、 <my-component-name> と <MyComponentName> のどちらも許容されることを意味します。ただし、DOM 内 (すなわち、文字列でないテンプレート) に直接使用する場合には、ケバブケースの名前のみが有効なので注意してください。

グローバル登録

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

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

これらのコンポーネントは グローバル登録 されています。これは、登録後に作成された、全てのルート Vue インスタンス(new Vue)のテンプレート内で使用できることを意味します。例えば:

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

new Vue({ el: '#app' })

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

これは全てのサブコンポーネントにも適用されます。これら 3 つのコンポーネント全てが 内部で相互に 使用可能になることを意味します。

ローカル登録

多くの場合、グローバル登録は理想的ではありません。例えば Webpack のようなビルドシステムを利用しているときに、グローバルに登録した全てのコンポーネントは、たとえ使用しなくなっても、依然として最終ビルドに含まれてしまうことでしょう。これは、ユーザがダウンロードしなくてはならない JavaScript のファイルサイズを不要に増加させてしまいます。

このような場合に、コンポーネントを素の JavaScript オブジェクトとして定義することができます:

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

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

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

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

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

var ComponentA = { /* ... */ }

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

もしくは、Babel と Webpack のようなものを用いて ES2015 モジュールを利用しているならば、このようになるでしょう:

import ComponentA from './ComponentA.vue'

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

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

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

モジュールシステム

もし、 import/require を用いたモジュールシステムを使用しないなら、このセクションをスキップすることができます。使用する場合、いくつかの特別な手順とヒントを用意しています。

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

ここを見ているということは、おそらくあなたは Babel と Webpack のようなものを用いて、モジュールシステムを使用していることでしょう。もしそうなら、それぞれのコンポーネントをファイルとして配置する components ディレクトリを作成することを推奨します。

ローカル登録をする前に、使いたいコンポーネントごとにインポートする必要があります。例えば、ComponentB.js または ComponentB.vue ファイルを仮定して:

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

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

これで ComponentA と ComponentC の両方が ComponentB のテンプレート内で使えるようになります。

基底コンポーネントの自動グローバル登録

コンポーネントのうち多くは比較的共通して、 input や button のような要素をラップするだけです。時にこれらを 基底コンポーネント と呼び、これらは複数のコンポーネントを横断して頻繁に用いられます。

多数のコンポーネントが多数の基底コンポーネントを含めた結果:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

テンプレートでは、比較的少ないマークアップをサポートします:

<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

幸いにも、Webpack (または 内部的に Webpack を利用している Vue CLI 3+ ) を使用しているなら、 このような非常に汎用的な基底コンポーネントのグローバル登録に require.context を用いることができます。次に示す例は、アプリケーションのエントリファイル(例: src/main.js )で、基底コンポーネントをグローバルにインポートするコードです:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // コンポーネントフォルダの相対パス
  './components',
  // サブフォルダ内を調べるかどうか
  false,
  // 基底コンポーネントのファイル名に一致させるのに使う正規表現
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // コンポーネント設定を取得する
  const componentConfig = requireComponent(fileName)

  // コンポーネント名をパスカルケース (PascalCase) で取得する
  const componentName = upperFirst(
    camelCase(
      // フォルダの深さに関わらずファイル名を取得する
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // コンポーネントをグローバル登録する
  Vue.component(
    componentName,
    // `export default` を使ってコンポーネントがエクスポートされた場合に存在する
    // `.default` でコンポーネントオプションを期待していて
    // 存在しない場合にはモジュールのルートにフォールバックします。
    componentConfig.default || componentConfig
  )
})

(new Vue を使って)ルート Vue インスタンスを作成するより前に、グローバル登録を行う必要があることを 覚えておいてください。この例は実際のプロジェクトの文脈における、このパターンの一例です。