Posted at

Vue.js Unknown custom element の原因と対策 コンポーネントを登録 命名ケースに注意

Vue.js勉強中


Vue.js Unknown custom element の原因と対策

Unknown custom element: <****> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

って出るやつ

とある既存のソースを参考にしてハローワールドをいじっていたらわけわかんなくなった話。

正しくコンポーネントを登録できていないらしい


コンポーネント登録のやり方

公式ドキュメントをみる

https://jp.vuejs.org/v2/guide/components-registration.html

引用


コンポーネント名を定義する時、2 つの選択肢があります:

ケバブケース (kebab-case)

Vue.component('my-component-name', { /* ... */ })

ケバブケースでコンポーネント名を定義する場合、そのカスタム要素を参照する時も同様に、 のように、ケバブケースを用いなければいけません。

パスカルケース (PascalCase)

Vue.component('MyComponentName', { /* ... */ })

パスカルケースでコンポーネントを定義する場合、そのカスタム要素の参照には、どちらのケースも用いることができます。これは、 と のどちらも許容されることを意味します。ただし、DOM 内 (すなわち、文字列でないテンプレート) に直接使用する場合には、ケバブケースの名前のみが有効なので注意してください。


まさか命名ケースによって動作が違うとは夢に思わずかなりハマりました。:head_bandage:

いつもjavascriptを扱うときは気になった変数でgrep検索をかけてどこでその変数が使われているかとかそのfunctionの定義はどこだとか調べる癖があったんですけど

上記の例でいうと

「my-component-name」という文字列で検索をかけても「MyComponentName」は出てこないわけです。

この命名ケースによる寛容な仕様を知らないとMyComponentNameで検索をかけようとは思わないんですよね・・・:cold_sweat:

既存のソースを読んでいて「my-component-name」はどこで定義されるのかわからず悩みました。