在自定义组件上使用 v-for，我可以访问组件内部的 ":key" 的值吗？

Posted 2023-02-23

【中文标题】在自定义组件上使用 v-for，我可以访问组件内部的 ":key" 的值吗？

【英文标题】：Using v-for on a custom component, can I access the value of ":key" inside of the component?

【发布时间】：2021-08-05 01:30:57

【问题描述】：

当使用 v-for 创建自定义组件列表时，我经常发现自己将item.id 绑定到我的:key 和 :id 属性的值。我想知道是否（如果可以，如何）我可以访问key 的值，也许是作为我组件内部的道具。这将有效地为我省去在每个使用 v-for 指令的组件上创建 id 属性的麻烦。

<my-component v-for="item in items" :key="item.id" :id="item.id"></my-component>

// MyComponent.vue
props: ['key']

将key 注册为道具并在应用程序中使用this.key 会产生undefined 的值。很明显，我不能简单地将key 引用为道具。

建议？

【问题讨论】：

您的密钥与item.id 相同，它被传递为id，为什么不访问它呢？

这个想法是我不必在我使用v-for 的每个组件中添加:id="this.id" 属性并绑定:key="item.id"。我需要使用key 和v-for。密钥必须是唯一的。您几乎总是在您循环访问的对象上使用某种形式的id 属性来注册您的key。那么为什么我需要在使用 v-for 的每个组件中编写基本上完全相同的代码行两次呢？ :key="item.id" :id="item.id" 太多余了。我相信有一种方法可以访问关键值。也许有一个道具keyValue vue 通过了？

这能回答你的问题吗？ Access key from child component in vue

@painotpi 不幸的是，没有。 “无法读取未定义的属性‘键’”。我认为它可能自 2017 年以来发生了变化。我使用的是 Vue3，我认为这一定是 Vue 或 Vue2 的答案。

是的，感谢您试一试！我会试试 Discord。我希望我找到了合适的——Vue Land？我试试看，那里。

【参考方案1】：

我一直在打听，看起来key 的值更多地用于 Vue 的虚拟 DOM，这使得它作为组件本身的数据属性的可用性大大降低。因为虚拟 DOM 可以更改，所以 key 的值可能会更改为与数据的预期 id 属性不同步，如果 Vue 发现这样做很有效的话。这使得使用它来引用数据中特定对象的id 不可靠。

如果其他人有更好的解释，请分享。