如何让Vue组件适配不同结构数组实现复用？传递可选字段方案

完全可以实现你想要的效果，核心是用对象属性的方括号访问语法——模板里的点语法（item.itemType）是访问名为itemType的字面量属性，而方括号语法（item[itemType]）会把itemType当作变量，去取对应名称的属性值，不用写一堆if分支。

步骤1：定义可复用组件 #

给组件声明两个Props，统一处理渲染逻辑：

• items：要渲染的数组（必填）
• itemField：可选字段名，指定要渲染的对象属性

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <!-- 动态判断：有指定字段就渲染对应属性，否则渲染整个item -->
      <p>{{ itemField ? item[itemField] : item }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  items: {
    type: Array,
    required: true
  },
  itemField: {
    type: String,
    default: ''
  }
})
</script>

步骤2：两种场景的使用示例 #

场景1：渲染简单数组（无指定字段）

<Component :items="['one', 'two', 'three']" />

场景2：渲染对象数组，指定显示字段

<Component :items="[{name: 'one'}, {name: 'two'}, {name: 'three'}]" item-field="name" />

后续需要渲染其他字段（比如title），直接传item-field="title"即可，无需修改组件代码。

扩展：支持嵌套字段（可选） #

如果要处理item.user.name这类嵌套属性，给组件加个字段解析逻辑：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <p>{{ getFieldValue(item) }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  itemField: {
    type: String,
    default: ''
  }
})

const getFieldValue = (item) => {
  if (!props.itemField) return item
  // 拆分嵌套字段路径，比如"user.name"拆成["user", "name"]
  return props.itemField.split('.').reduce((current, key) => {
    return current?.[key] ?? ''
  }, item)
}
</script>

使用时直接传嵌套字段名：

<Component :items="[{user: {name: 'one'}}]" item-field="user.name" />

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