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 内 (すなわち、文字列でないテンプレート) に直接使用する場合には、ケバブケースの名前のみが有効なので注意してください。
まさか命名ケースによって動作が違うとは夢に思わずかなりハマりました。
いつもjavascriptを扱うときは気になった変数でgrep検索をかけてどこでその変数が使われているかとかそのfunctionの定義はどこだとか調べる癖があったんですけど
上記の例でいうと
「my-component-name」という文字列で検索をかけても「MyComponentName」は出てこないわけです。
この命名ケースによる寛容な仕様を知らないとMyComponentNameで検索をかけようとは思わないんですよね・・・
既存のソースを読んでいて「my-component-name」はどこで定義されるのかわからず悩みました。