【Vue.js】単一ファイルコンポーネントの使い方

2019/10/27 2019/10/23

グリーバル登録の場合

import TestComponent from "./components/HelloComponent.vue";
Vue.component('TestComponent',TestComponent);

ローカル登録の場合は

import TestComponent from "./components/HelloComponent.vue"

としてimportして、
使いたいVueで

components: {
  TestComponent:TestComponent
}

として登録する

呼び出しはどちらも

<test-component></test-component>

となる。

ちなみに、components:{}において、keyとvalueが同じであれば

components: {
  TestComponent:TestComponent
}

つまりこのようであれば、

components: {
  TestComponent
}

こう略することができる。