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>

，我收到此错误消息：

属性或方法“组件”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

Answer 1

vue的模板构建器中没有components属性，您必须定义data的计算或属性。例如：

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

或

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

遍历vuejs中的本地注册组件

1 个答案: