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

这是我参与更文挑战的第23天，活动详情查看：更文挑战

导读

在前端开发的时候，运行Vue项目，遇到提示报错Unknown custom element:XXX – did you register the component correctly…的问题，根据报错提示进行相关问题的解决，接下来就来详细聊一下解决方法。

问题

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

[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”，欢迎关注！