Nuxt.js を触り始めて、疑問に思った事をちゃんとまとめておこうシリーズ。
Question
以下のように components には (ES2015のキー名を省略できる書き方によって) {LogoTest: LogoTest} として定義されているはず。
しかし、template に書くときは <logo-test></logo-test> とキーと一致しないケバブケースで記載しても有効と認識されるのはなぜか？
index.vue
<template>
<logo-test></logo-test>
<!-- ちなみに LogoTest とキーをそのまま書いても通る -->
</templage>
<script>
import LogoTest from '~/components/LogoTest.vue';
export default {
components: {
LogoTest
}
};
</script>
Answer
Vue.js の仕様。 具体的には以下で説明されている。
パスカルケースでコンポーネントを定義する場合、そのカスタム要素の参照には、どちらのケースも用いることができます。これは、 と のどちらも許容されることを意味します。ただし、DOM 内 (すなわち、文字列でないテンプレート) に直接使用する場合には、ケバブケースの名前のみが有効なので注意してください。
https://jp.vuejs.org/v2/guide/components-registration.html
Vue.js では「JavaScriptではキャメルケース」「HTMLはケバブケース」として書くことが推奨されており、基本はこのルールを覚えていて開発を行うのが良さそう。 以下、参考。