Vue中v-for循环内如何从子组件访问作为key传入的属性值

数据老陈

2026-9-29

Vue的key属于框架专用的特殊属性，不会作为普通属性传递给子组件，也无法在子组件内部直接读取，下面是几种可行的实现方案：

方案1：显式传递Props（最推荐，符合单向数据流规范，稳定性最高）
直接给ListItem新增一个自定义Props接收对应值，父组件循环时显式传入即可，示例代码如下：
父组件代码：

<List>
    <ListItem 
        v-for="item in items" 
        :key="item.value"
        :item-value="item.value"
    >
        {{ item.label }}
    </ListItem>
</List>

子组件（ListItem）接收示例（Vue3 语法糖）：

<script setup>
const props = defineProps(['itemValue'])
// 直接通过 props.itemValue 访问对应值即可
</script>

方案2：传递整个item对象
如果ListItem后续还需要用到item的其他属性，可以直接把整个item对象传过去，避免后续反复新增Props：
父组件代码：
```
<List>
    <ListItem 
        v-for="item in items" 
        :key="item.value"
        :item="item"
    >
        {{ item.label }}
    </ListItem>
</List>
```
子组件内可以直接通过props.item.value读取对应值。
不推荐方案：读取父组件虚拟节点
部分场景下可能会想通过子组件实例访问父组件的vnode获取key，但这属于Vue内部未公开的API，不同版本实现逻辑可能变动，维护性极差，完全不建议生产环境使用。