vue 解决循环引用组件/动态组件/组件未注册报错

使用动态组件报错

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <component :is="item"></component>
    </div>
  </div>
</template>
<script>
// 先把组件引入
import ImageComponent from './Image.vue'
import TextComponent from './Text.vue'
import VideoComponent from './Video.vue'
export default {
  components: {
    ImageComponent,
    TextComponent,
    VideoComponent
  },
  data () {
    return {
      list: ['ImageComponent', 'TextComponent', 'VideoComponent']
    }
  }
}
</script>

解决如下

生命周期中临时注册一下

    beforeCreate() {
      this.$options.components.ImageComponent= require('./ImageComponent.vue').default
    }

搞定了~~