vue-property-decoratorでUnknown custom element:did you register the component correctly?
今回はvue-property-decoratorで「Unknown custom element:- did you register the component correctly? For recursive components, make sure to provide the “name" option.」というエラーが起きてしまったときの解決策を一つ提示したいと思います。
vue-property-decoratorでUnknown custom element:did you register the component correctly?
Vue.jsとTypeScript環境でvue-property-decoratorを使って開発を行っていたときです。
Componentを定義しようとしたら「Unknown custom element:- did you register the component correctly? For recursive components, make sure to provide the “name" option.」というエラーが起きてしまいました。
エラーが起きてしまったソースコードは次の通りです。
初期のHelloWorldコンポーネントを使用しております。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import HelloWorld from "@/components/HelloWorld.vue"; @Component({ components: { HelloWorld } }) @Component export default class Home extends Vue { } </script> |
結論から言うと、二つ目の「@Component」を消して次のように書いたらエラーが解消されました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import HelloWorld from "@/components/HelloWorld.vue"; @Component({ components: { HelloWorld } }) @Component export default class Home extends Vue { } </script> |
単に書き方の問題ですね。
やはりテンプレなしで自分で試行錯誤してソースコードを書いていくのは骨が折れます。
終わりに
今回はvue-property-decoratorで「Unknown custom element:- did you register the component correctly? For recursive components, make sure to provide the “name" option.」というエラーが起きてしまったときの解決策を一つ提示いたしました。