vue中如何将数组带对象的数据传递给子组件并且子组件接受使用

在Vue.js中，你可以使用props（属性绑定）将包含对象的数组传递给子组件，并让子组件访问和使用这些数据。下面是一个基本的步骤说明：

1. **定义父组件的props：**
在父组件模板中，使用`v-bind`（旧语法`:`）将数组作为prop传递给子组件：

   <template>
     <child-component :items="parentItems" />
   </template>

   <script>
   export default {
     data() {
       return {
         parentItems: [
           { key: 'item1', value: 'value1' },
           { key: 'item2', value: 'value2' }
         ]
       };
     }
   };
   </script>

2. **在子组件中定义props并使用：**
子组件的`script`部分中，你需要声明它将接受哪些props，并在组件内部通过`this.items`来访问它们：

   <!-- child-component.vue -->
   <template>
     <ul>
       <li v-for="(item, index) in items" :key="index">
         Key: {{ item.key }} | Value: {{ item.value }}
       </li>
     </ul>
   </template>

   <script>
   export default {
     props: ['items'], // 声明接收名为items的prop
     mounted() {
       console.log(this.items); // 子组件初始化时会打印父组件传递的数组
     }
   };
   </script>

当你在父组件修改`parentItems`数组时，因为它是响应式的，所以子组件会自动刷新并显示最新的数据。

**注意事项：**
- `items`名字只是示例，你可以根据实际情况更改。
- 如果需要对子组件的prop进行深层次的对象操作，记得使用`.sync`修饰符（只读模式），或在父组件内提供一个方法来更新，避免直接修改父组件的原始数据。