如何跨两个Vue组件使用app.vue存储的数组数据实现列表展示

现有组件职责划分

• 根组件App.vue：存储列表源数据数组，每条数据包含标题、内容等业务字段
• 子组件1（单条列表渲染组件）：负责单条列表项的内容结构渲染
• 子组件2（列表管控组件）：负责列表整体样式定义、展示规则控制（如分页、空状态判断、排版间距设置）

第一步：在App.vue内定义源数据 #

直接在App.vue中定义好列表数组，不需要额外封装：

// App.vue <script setup> 片段
import { ref } from 'vue'
import ListPanel from './components/ListPanel.vue' // 引入负责样式与规则的管控组件

// 定义源列表数据
const listData = ref([
  { id: 1, title: 'Vue跨组件传值说明', content: '通过Props实现逐层数据传递' },
  { id: 2, title: 'v-for渲染规则', content: '遍历数组绑定唯一key值避免渲染错乱' },
  { id: 3, title: '单向数据流规则', content: '子组件不直接修改Props传入的源数据' }
])

第二步：通过Props向管控组件传递源数组 #

因为负责样式和展示规则的组件是直接在App.vue中引入的，直接把源数组通过Props传递即可：

// App.vue <template> 片段
<ListPanel :source-list="listData" />

第三步：在管控组件内接收数组、完成全量遍历渲染 #

这一步直接解决两个核心问题：读取数组内各列表项字段、遍历所有项完成渲染

• 首先在管控组件内声明接收Props，拿到App.vue传过来的完整数组：

  // ListPanel.vue <script setup> 片段
  import ListItem from './ListItem.vue' // 引入单条列表渲染组件
  
  const props = defineProps({
    sourceList: {
      type: Array,
      required: true
    }
  })
  

• 直接在管控组件的模板内遍历拿到的数组，在这个组件里可以随意读取数组里每条的任意字段（比如title、id），所有样式、展示规则判断逻辑都可以直接写在这里：

  // ListPanel.vue <template> 片段
  <!-- 这里是整个列表的统一样式容器 -->
  <div class="list-wrapper">
    <!-- 直接对拿到的源数组做遍历，把每一条数据单独传给单条渲染组件 -->
    <ListItem 
      v-for="item in props.sourceList"
      :key="item.id"
      :item-info="item"
    />
  </div>
  

这里可以直接在遍历逻辑里加自定义规则，比如过滤掉不需要显示的列表项、给特殊类型的列表项加专属类名，因为已经拿到了完整数组，不需要额外发请求或者跨层取数据。

第四步：在单条渲染组件内读取字段完成内容渲染 #

• 在单条渲染组件内声明接收传递过来的单条对象：

  // ListItem.vue <script setup> 片段
  const props = defineProps({
    itemInfo: {
      type: Object,
      required: true
    }
  })
  

• 直接通过Props访问单条内的所有字段（比如标题、内容），写单条的内容结构：

  // ListItem.vue <template> 片段
  <div class="list-item">
    <h4 class="item-title">{{ props.itemInfo.title }}</h4>
    <p class="item-content">{{ props.itemInfo.content }}</p>
  </div>
  

实际开发容易踩的坑 #

• 传下去的Props遵循单向数据流规则，不要在子组件直接修改传入的数组/对象，需要修改时通过emit事件通知App.vue更新源数据即可，避免出现数据不同步的问题
• 遍历渲染时必须绑定数组内的唯一值作为key，直接拿每条数据里的id当key就行，不要用数组下标，不然动态增删列表项时容易出现内容错位
• 如果两个子组件是平行放置在App.vue中的，不需要搞复杂的跨层级传值，直接把同一个listData分别通过Props传给两个平行组件即可，无需引入Pinia/Vuex这类状态管理工具

内容的提问来源于stack exchange，提问作者Sergen Becerik