vue报错组件未注册情况的解决方案

一、问题描述

在引用组件的时候出现如下报错：

image.png

二、解决方案

1. 没有引用组件导致
   这种情况只需要在你的组件中将你用到的组件引入即可。

<template>
  <child></child>
</template>
<script>
import child from '@/components/child';
export default {
  name: 'current',
  components: {
    child
  }
}
</script>

2. 循环引用导致
   由于上面的第一种解决方式是直接引入，所以显然在循环引用的时候我们是引用不到组件的，此时需要用到webpack的异步
   parent组件

<template>
  <child></child>
</template>
<script>
import child from '@/components/child';
export default {
  name: 'current',
  components: {
    child
  }
}
</script>

child组件

<template>
  <parent></parent>
</template>
<script>
export default {
  name: 'current',
  components: {
    parent: () => import('@/components/parent')
  }
}
</script>