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
    }

搞定了~~