Vue.js でのimport HogeComponent from 'hoge-component'は<template>で<hoge-component>と書ける

はじめに

Vue.jsのアッパーキャメルケースからケバブケースへの変換をわざわざ手入力でしていましが、それをしなくとも自動的にVue.jsがしてくれることに気づいたのでそれについて記入。

環境

利用しているモジュールとバージョンについてです。

  • Vue.js: 2.5.17
  • parcel-bundler: 1.9.7

概要

インポートでimport HogeComponent from './HogeComponent.vue';と書いたときに、 コンポーネントで以下のように書かなくても、

components: {
  'HogeComponent': HogeComponent
}

以下のように書いても動きます。
HogeApp.vue

<template>
  <HogeComponent></HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

びっくりです。

ちなみにpropsでも

v-bindでデータを渡すときにHogeComponent.vueのpropsでfooBar: Stringと定義しておいても :foo-bar="ok"で渡して問題ないようです。

HogeApp.vue

<template>
  <HogeComponent
      :foo-bar="'ok'">
  </HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

HogeComponent.vue

<template>
  <div>{{ fooBar }}</div>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeComponent',
  props: {
    fooBar: String
  }
}
</script>

以下のように、HogeComponent.vueのpropsで'baz-qux': Stringと定義したときは、
同vueファイル内の<template>では<div>{{ bazQux }}</div>と書けるようです。

HogeApp.vue

<template>
  <HogeComponent
      :baz-qux="'ok'">
  </HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

HogeComponent.vue

<template>
  <div>{{ bazQux }}</div>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeComponent',
  props: {
    'baz-qux': String
  }
}
</script>

しかし、以下のコードは動きません。 HogeApp.vue

<template>
  <HogeComponent
      :bazQux="'ok'">
  </HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

HogeComponent.vue

<template>
  <div>{{ bazQux }}</div>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeComponent',
  props: {
    bazQux: String
  }
}
</script>

問題

原因としてはhtmlの命名規則らしいです。以下の記事が参考になります。

まとめ

htmlタグを書くときは、ケバブケースで記入する。
まとめを書いてるときに以下の記事を見つけました。自分の記事の上位互換な気がしてやまないです。