[Vue warn]: Unknown custom element: <mycom1> - did you register the component co

265 阅读2分钟

在vue开发的时候,调用组件后有如下报错:

[Vue warn]: Unknown custom element: <mycom1> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

网上找了很多原因,总结归纳:

  1. import语句导入组件时from后面的路径写错
  2. 注册组件时括号内的组件名称写错,与import声明的不一致
  3. 注册组件关键字components写错导致无法使用
  4. 使用组件时名称写错,与注册组件的名字不一致
  5. 使用组件时没有使用 / 反斜杠结尾
  6. 标签中包含大写
  7. 看 components:{},单词是否拼错,和不要写成components(){}
  8. 本页面components 看写了几个, 是否是因为覆盖了。只能有一个components:{}
  9. 导出时使用export default的话引入组件不能加花括号{}
  10. 多个语句要加分号
  11. 检查引入的组件 确定是否需要{} , import XXX from "...." 还是 import { XXX } from "...."
  12. vue的使用ui版本是否与ui组件版本文档语法对应的上,不同版本写法可能不一样,也会导致上面的问题
  13. 假如有A,B两个组件,渲染A组件的时候,A组件中引入了B组件显示,在渲染B组件的时候又引入了A组件,会导致控制台一直报是否正确注册了组件的错误。
  • 解决方法:使用 import 异步调用组件 components: { child: () => import('./child') }

!!!但最终,却是以下原因,参考解决(^-^)V:

这个报错是因为找不到 mycom1 这个组件导致的,对于新手来说,这是个坑,因为vue要求**如果创建组件时使用驼峰命名,调用组件的时候需要将驼峰改为横线-写法。

也就是说你创建组件的时候这样写,命名为 myCom1:

var app = new Vue({
    el: '#app',
    components: {
        'myCom1': {
            template: '<h1>我是myCom1组件</h1>'
        }
    }
})

 

调用的时候得如下写才行:

 <my-com1></my-com1> 

参考链接:

www.sunqizheng.com/blog/1733.h… blog.csdn.net/qq_42910468… blog.csdn.net/qq_45677671…