如何批量配置Vue组件Props为Array类型且必填？

嘿，这个场景我太熟悉了！当需要定义一堆同类型且必填的Props时，重复写{ type: Array, required: true }确实够繁琐的。你已经想到用变量复用配置，这思路没问题，但还有更高效的批量生成方式，我给你分享几个实用的方法：

方法一：用Object.fromEntries批量生成（推荐） #

这个方法最简洁，新增Props只需要在数组里加名字就行，完全不用重复写配置：

// 定义通用的数组必填配置
const requiredArrayProp = { type: Array, required: true }
// 列出所有需要的Prop名称
const propNames = ['completed', 'remaining', 'todos']

// 在组件的props选项中批量生成
props: Object.fromEntries(propNames.map(name => [name, requiredArrayProp]))

如果后续需要给某个Prop单独修改配置（比如改成非必填），直接在props里覆盖就行：

props: {
  ...Object.fromEntries(propNames.map(name => [name, requiredArrayProp])),
  // 单独调整某个Prop的配置
  optionalTodos: { type: Array, required: false }
}

方法二：用reduce遍历生成（兼容旧环境） #

如果你的项目还在使用不支持Object.fromEntries的旧环境，可以用Array.reduce来实现同样的效果：

const requiredArrayProp = { type: Array, required: true }
const propNames = ['completed', 'remaining', 'todos']

props: propNames.reduce((propsObj, name) => {
  propsObj[name] = requiredArrayProp
  return propsObj
}, {})

关于你之前的变量复用写法 #

你提到的用变量复用配置的写法是完全可行的，但要注意一个小坑：因为JS对象是引用类型，如果后续你修改了params的属性，所有引用它的Props配置都会跟着变。如果需要单独修改某个Prop的配置，记得做浅拷贝：

let params = { type: Array, required: true }

props: {
  completed: params,
  remaining: params,
  // 单独修改这个Prop的必填性，不影响其他
  todos: { ...params, required: false }
}

Vue3 额外优化（用defineProps） #

如果是Vue3项目，用<script setup>的话，可以把逻辑写得更紧凑：

const requiredArrayProp = { type: Array, required: true }
const propNames = ['completed', 'remaining', 'todos']

const props = defineProps(
  Object.fromEntries(propNames.map(name => [name, requiredArrayProp]))
)

内容的提问来源于stack exchange，提问作者Student of Science