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