Vue.js - Unknown custom element (vue-cli 単一ファイルコンポーネント)
Problem
Vue.js を試してみようと、vue-cli を使って Single File Components 方式で始めてみました。
ところが、コンポーネントを入れ子にしたタイミングでエラー発生。
Unknown custom element: <Hello> - did you register the component correctly? For recursive components, make sure to provide the “name” option.
未知のカスタム要素: <Hello> ― 正しくコンポーネントを登録しましたか？ 再帰的なコンポーネントの利用においては “name” オプションが提供されていることを確認してください。
もしあなたが再帰的なコンポーネントのような難しいことをしようとしていないならば、 エラーの原因は些細な記述ミスである可能性が高いです。
従来方式のおさらい
コンポーネントを *.js ファイルに記述する従来の方式であれば、下記のようにしてコンポーネントを登録します。
Vue.component(SomeCompo.name, SomeCompo);
Vue.component(AnotherCompo.name, AnotherCompo);
単一ファイルコンポーネント方式でのコンポーネント登録方法
単一ファイルコンポーネント
とは SomeComponent.vue のように *.vue 拡張子のファイルで表現したコンポーネントを指します。
こちらは公式から引用した Single File Components のサンプルです。components:の箇所を改めてよく見てみると、配列ではなくオブジェクト になっているじゃありませんか。
components: {
OtherComponent
}
従来のJavaScriptを知っている方なら、これはシンタックスエラーと勘違いするかもしれません。ですが、ES2015 からショートハンドで上記のように書けるようになりました。 言い換えれば、以下の通り書いたときと同じ意味になります。
components: {
OtherComponent: OtherComponent
}
つまり “OtherComponent” という名前のコンポーネントとして OtherComponent を登録しています。
パスカルケース (PascalCase)で登録
したコンポーネント OtherComponent は、ケバブケース (kebab-case) other-component でテンプレート内に記述して利用します。
なので <other-component>...</other-component> とマークアップすることでコンポーネントを配置できます。
上の画像 Hello.vue のテンプレート内を見てみると other-component と書いてあり、コンポーネントを利用していることがわかります。
さらにテンプレートは Jade (現Pug) で簡潔に書ける例を提示しているため <x> </x> の形式を簡略化しています。
さて、問題は解決できたでしょうか。
お困りの際はこちらからどうぞ。暇してたらサポートします。