我来帮你搞定这个需求！你想要动态传入文本属性名、避免硬编码，其实只需要调整组件的prop定义和模板绑定逻辑就行，完全不用额外写复杂的JavaScript代码。

修正后的组件代码 #

首先，我们需要在组件里声明接收text-property这个属性，然后在模板里正确引用它：

<template>
  <div class="form-control item-container">
    <div class="custom-control custom-checkbox mr-sm-2" v-for="item in items" :key="item.value">
      <input type="checkbox" class="custom-control-input" :id="item.value">
      <!-- 这里用组件的textProperty prop，而非item的属性 -->
      <label class="custom-control-label" :for="item.value">{{ item[textProperty] }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传入的选项数组
    items: {
      type: Array,
      required: true
    },
    // 接收文本属性名，Vue会自动把父组件的kebab-case转为camelCase
    textProperty: {
      type: String,
      required: true,
      // 可选：设置默认值，防止父组件未传入的情况
      // default: 'name'
    }
  }
}
</script>

关键说明 #

1. Prop声明：在组件的props选项里定义textProperty，指定它是字符串类型且必填（也可以加默认值增强容错性）。Vue会自动处理父组件传入的text-property（kebab-case格式），转为组件内部可用的textProperty（camelCase格式），这是Vue的内置规范。
2. 模板绑定修正：你之前写的item[item.textProperty]是错误的——textProperty是组件的属性，不是每个item对象的属性，所以要去掉item.前缀，直接用item[textProperty]就能动态访问对应属性值，比如父组件传text-property="name"时，这里就会自动绑定item['name']。

可选优化（按需使用） #

如果想更严谨，还可以给textProperty加一个验证函数，确保传入的属性名在所有item对象中都存在：

textProperty: {
  type: String,
  required: true,
  validator(value) {
    return this.items.every(item => Object.prototype.hasOwnProperty.call(item, value));
  }
}

这样修改后，你原来的父组件调用方式<check-list :items="myItems" text-property="name" />完全不用变，组件就能自动根据传入的属性名动态渲染文本了，完美符合你的需求！

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