Vue.js中父组与子组继承场景下同源数据关联列表的构建方法

前置说明 #

你要求的assignment仅接收对象类型参数、父子组共用同源数据的需求，可以通过数据引用关联+嵌套v-for渲染的方案实现，所有数据全部来自数据库传入的assignment对象，无额外外部数据源。

步骤1：定义符合要求的assignment数据结构 #

从数据库传入的assignment对象内置共享数据源，父子组仅存关联ID指向共享数据，保证所有渲染数据同源：

// 数据库返回的assignment对象（严格符合对象类型要求）
const assignment = {
  // 全局同源共享数据，父子组所有展示内容都来自该对象
  sharedData: {
    1: { id: 1, name: "项目迭代1", progress: 60 },
    2: { id: 2, name: "项目迭代2", progress: 10 },
    3: { id: 3, name: "需求评审", progress: 100 },
    4: { id: 4, name: "开发编码", progress: 40 },
    5: { id: 5, name: "测试验收", progress: 0 }
  },
  // 父组配置，关联共享数据ID和对应子组ID列表
  parentList: [
    { parentId: "p1", refId: 1, childRefIds: [3,4] },
    { parentId: "p2", refId: 2, childRefIds: [5] }
  ]
}

步骤2：Vue模板嵌套渲染实现 #

直接通过嵌套v-for遍历父组、子组，所有数据都从assignment.sharedData读取，保证同源：

<template>
  <div class="nested-list">
    <!-- 遍历父组 -->
    <div class="parent-item" v-for="parent in assignment.parentList" :key="parent.parentId">
      <div class="parent-title">
        父组：{{ assignment.sharedData[parent.refId].name }}
        <span>进度：{{ assignment.sharedData[parent.refId].progress }}%</span>
      </div>
      <!-- 遍历当前父组关联的子组 -->
      <div class="child-list" style="margin-left: 20px;">
        <div class="child-item" v-for="childId in parent.childRefIds" :key="childId">
          子项：{{ assignment.sharedData[childId].name }}
          <span>进度：{{ assignment.sharedData[childId].progress }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 声明props，严格限制assignment为对象类型
defineProps({
  assignment: {
    type: Object,
    required: true
  }
})
</script>

方案优势 #

• 完全满足assignment仅传入对象类型的限制，无额外顶层参数
• 父子组所有数据都来自assignment.sharedData同一个数据源，修改任意一处的共享数据，父子组的渲染会同步更新，无数据不一致问题
• 数据无冗余拷贝，结构轻量化，便于后端数据库存储和返回

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