Javascript 如何使动态对象特性可用于v-for-in-in-one中的父组件

我有一个子组件，它使用v-for。下面是子组件：

<template>
    <div>
        <ul>
            <li v-for="item in listItems"
                :key=item.id>
                <span>{{item.name}} - {{item.color}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            listItems: Array
        }
    };
</script>

您可以使用以下方法：

   <li v-for="item in listItems"
                :key=item.id>
               <slot v-bind:item="item">
                 <span>{{item.name}} - {{item.color}}</span>
               </slot>
            </li>

{{item.name}-{{item.color}

然后您可以随意使用它：

<child> 
  <template v-slot:default="{item}">
   <span>{{item.id}} - {{item.location}}</span>
  </template>
</child>

{{item.id}-{{item.location}

或

{{item.location}

如果您只使用了几个不同的，那么您可以有一系列的

{{item.id}-{{item.foo}

<child> 
  <template v-slot:default="{item}">
   <span>{{item.id}} - {{item.location}}</span>
  </template>
</child>

<child> 
  <template v-slot:default="{item}">
   <p>{{item.location}}</p>
  </template>
</child>