javascript - 遍历vuejs中本地注册的组件

Question

我有一个 Vue 组件，可以在本地导入和注册其他组件。我想遍历组件对象并动态呈现它们。我正在尝试通过以下方式实现这一点(在 .vue 文件中):

<template>
  <div v-for="component in components" class="component">
    <component v-bind:is="component"></component>
  </div>
</template>

<script>
import CarouselDefault from './carousel/CarouselDefault'
import AlertError from './alerts/AlertError'
import AlertInfo from './alerts/AlertInfo'
import AlertSuccess from './alerts/AlertSuccess'
import AlertWarning from './alerts/AlertWarning'

export default {
  name: 'App',
  components: {
    CarouselDefault,
    AlertError,
    AlertInfo,
    AlertSuccess,
    AlertWarning
  }
}
</script>

我收到了这个错误信息:

Property or method "components" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

components 属性在 vue 的模板构建器中不可用，您必须定义 computed 或 data 的属性。 示例:

computed:{
components(){
       return [
          CarouselDefault,
          AlertError,
          AlertInfo,
          AlertSuccess,
          AlertWarning
       ];
}
}

或

data(){
return {
 components:[
    CarouselDefault,
    AlertError,
    AlertInfo,
    AlertSuccess,
    AlertWarning
  ]
}
}