写点什么

前端开发:Vue 项目报错 Unknown custom element:XXX - did you register the component correctly…的解决方法

用户头像
三掌柜
关注
发布于: 2021 年 05 月 17 日

导读

Vue 项目报错 Unknown custom element:XXX - did you register the component correctly…的解决方法。


问题

前段时间在做前端项目的时候,遇到了一个关于饿了么框架的报错问题,具体报错信息如下所示:

[Vue warn]: Unknown custom element: <table-page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in---> <SocialFundAdjustList> at src/views/SocialFundManagement/SocialFundAdjustList.vue<App> at src/App.vue<Root>
[Vue warn]: Unknown custom element: <dialog-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in---> <SocialFundAdjustList> at src/views/SocialFundManagement/SocialFundAdjustList.vue<App> at src/App.vue<Root>
[Vue warn]: Unknown custom element: <SearchCompany> - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in---> <SocialFundAdjustList> at src/views/SocialFundManagement/SocialFundAdjustList.vue<App> at src/App.vue<Root>
复制代码



问题分析通过分析上述几个错误提示,对于递归组件,需要提供 name 选项,也就是说没有注册自定义组件 name 或者是没有正确引入自定义组件。


解决方法

1、查看是否注册组件

正确的注册组件方法,如下所示:

export default {
data(){ return{}},
components: { //注册组件 TablePage, DialogForm, SearchCompany, },}
复制代码

2、查看是否正确引入自定义组件

引入组件的时候一定要看清楚组件的路径,谨防写错。正确的引入组件的方法,具体如下所示:

<script> //引入组件	import TablePage from '@/components/comm/TablePage';	import DialogForm from '@/components/comm/DialogForm';	import SearchCompany from '@/components/comm/SearchCompany';</script>
复制代码



根据上述两个解决方法的对应排查报错问题的地方,即可解决上述报错问题,解决自定义组件引入不成功或者未注册造成的错误。


以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

三掌柜的微信公众号:


三掌柜的新浪微博:


发布于: 2021 年 05 月 17 日阅读数: 17
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
5月日更打卡第九天
2021 年 05 月 17 日 01:00
回复
没有更多了
前端开发:Vue项目报错Unknown custom element:XXX - did you register the component correctly…的解决方法