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

Question

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

父组件：

子组件：

Answer 1

<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <span v-for="(item,index) in items" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; <TitleOption v-bind:titlename="item.titlename" v-bind:bordercolor="item.bordercolor">&nbsp; &nbsp; &nbsp; &nbsp; </TitleOption>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </div></template>export default {&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; titlename:'通道进门统计对比',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bordercolor:'#f14d68'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; titlename:'adddsagasgas',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bordercolor:'#123456'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}用v-for试试