【报错】Unknown custom element: <组件名> - did you register the component correctly?

文章介绍了在Vue.js开发中遇到的UnknownCustomElement错误,可能的原因包括组件名字拼写错误、组件覆盖、以及循环引用问题。提供了两种解决方案:一种是在beforeCreate生命周期钩子中注册组件,另一种是使用webpack的异步import进行局部动态注册。
摘要由CSDN通过智能技术生成

【报错信息】Unknown custom element: <组件名> - did you register the component correctly?

可能的原因如下:

  1. 组件名字是否写对了
  2. import xxx from “./xxx.vue” 写成了import { xxx} from “./xxx.vue”
  3. 代码中有两个components,后一个的值把前一个覆盖了
  4. 组件直接循环套用了

第四种情况的说明:

假如有A,B两个组件,渲染A组件的时候,A组件中引入了B组件显示,在渲染B组件的时候又引入了A组件,会导致控制台一直报是否正确注册了组件的错误。

第四种情况的解决方案:

【方案一】

在我们的例子中,把 组件设为了那个点。我们知道那个产生悖论的子组件是 组件,所以我们会等到生命周期钩子 beforeCreate 时去注册它:

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

【方案二】

或者,在本地注册组件的时候,你可以使用 webpack 的异步 import:

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值