导读

在前端开发的时候，运行项目，遇到项目报错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或者是没有正确引入自定义组件，如果没有提供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”，欢迎关注！