vue父向子组件传递list

### Vue 中父组件向子组件传递列表数据

在 Vue 应用程序中，可以通过 `props` 将列表数据从父组件传递给子组件。为了确保数据的安全性和可维护性，通常不建议直接修改来自父级的数据。一种常见的做法是创建一个计算属性来处理这些数据。

#### 使用 Props 传递 List 数据

当父组件拥有一个名为 `lists` 的数组并希望将其传递给子组件时，可以在父组件的模板中使用 `v-bind` 或简写形式 `:` 来绑定该属性：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :listData="parentLists"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      parentLists: ['item1', 'item2', 'item3']
    };
  }
};
</script>

子组件则定义相应的 prop 并利用它来进行展示或其他操作：

<!-- ChildComponent.vue -->
<template>
  <ul>
    <li v-for="(item, index) in showList" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  props: ['listData'],
  computed: {
    showList() {
      return this.listData;
    }
  }
};
</script>

这种方式下，如果父组件更新了 `parentLists` 数组，则子组件内的 `showList` 计算属性也会自动重新评估，从而反映最新的状态[^1]。

#### Provide/Inject 模式下的 List 数据共享

另一种方式适用于更深层次嵌套场景——即不仅仅限于直系父子关系之间传输数据的情况。此时可以考虑采用 `provide/inject` API 实现跨多层组件间的数据流通：

// 父组件 setup 函数内
setup(){
  const sharedState = reactive({
    items:['apple','banana','orange']
  });
  
  provide('sharedItems',toRefs(sharedState));
}

而在任意后代子孙组件里就可以轻松获取到所需资源而无需逐层透传下去:

// 子孙组件 script 部分
inject:{
  sharedItems:Object,
},
mounted(){
  console.log(this.sharedItems.items.value);
}

此方法特别适合那些需要在整个应用范围内频繁访问某些全局配置项或服务实例的情形[^2]。