创建多个组件

Question

我想知道是否有可能通过视觉调用某个组件一定次数？

基本上我有一个初始化为 5 的大小变量，我希望它是小部件组件的 5 倍。

这是我当前的代码：

模板：

<template>
    <div v-for="item in size" :key="item">
        <Widget/>
    </div>
</template>

脚本：

import Widget from './Widget'
export default {
    data () {
        return {
            size: 5
        }
    },
    components: {
        Widget
    }
}

我看过 v-for 但我不明白它是如何工作的。

Answer 1

一个组件只允许有一个根元素，因此最外层元素上的 v-for 会引发错误，因为它会创建多个根元素。这些中的任何一个都应该为您解决：

<template>
    <div>
        <div v-for="item in size" :key="item">
            <Widget/>
        </div>
    </div>
</template>

或

<template>
    <div>
        <Widget v-for="item in size" :key="item" />
    </div>
</template>

Answer 2

如果您想要固定数量的小部件，可以通过

<Widget v-for="number in 5" :key="number" />

请记住，组件的根模板元素不接受 v-for。

创建多个组件

Create a number of components

javascript

vue.js

vue-component

vuejs2

v-for