vue父组件引用多个相同子组件分别传值的问题？

Question

父组件引用了两次子组件TitleOption现在只完成了一组传值，我想在第二次调用的时候，传另一组值进去，应该怎么实现呢？就是titlename1和bordercolor1的值，但是参数名应该是不用变的，但是，这里有点不太了解了...我只想到不同页面调用组件的时候可以传不同的值，但是同一个父组件调用多个相同的子组件就有点不知所措了。父组件：子组件：

Answer 1

<template>

    <div>

        <span v-for="(item,index) in items" :key="index">

        <TitleOption v-bind:titlename="item.titlename" v-bind:bordercolor="item.bordercolor">

        </TitleOption>

        </span>

    </div>

</template>

export default {

    data() {

        return {

            items:[

                {

                    titlename:'通道进门统计对比',

                    bordercolor:'#f14d68'

                },

                {

                    titlename:'adddsagasgas',

                    bordercolor:'#123456'

                }

            ]

            

        }

    }

}

用v-for试试