Vue.js 如何区分Vue Devtools中的组件实例

当我在Vue的devtools chrome扩展中查看我的应用程序状态时，我可以在树状视图中看到同一组件的多个实例。但是，无法区分一个实例和另一个实例。例如，在下面的屏幕截图中有三个组件。想象一下有30个。如何将某种实例名称或id附加到组件？必须点击30个组件才能找到我需要的组件，这似乎很愚蠢

几个月前我也有同样的想法

所以我试了一下

我的PR已提交：

现在依赖我的解决方案可能还为时过早，因为核心团队仍然可以拒绝PR或请求其他命名约定

在此之前，您可以根据我的回购协议自己构建我的提案版本：

这对你有帮助吗

---

最好的，Christian

如果目前没有办法在github回购协议上发行，也许他们会在将来添加它。您希望这样的工作怎么样？组件

名称

到

道具

的散列图是否沿其侧面显示<代码>Vue.config.devtoolsComponentIdentifierMap={Todo:'id'}然后在inspector中获得类似于

| | | |

`的内容？我不知道这是否是一个好的解决方案，但您可以在组件

中安装
this.$options.name='todo'+this.todo.someProp
method@ABDEL-RHMAN-我对Vue来说太新了，不知道这是不是一个好的解决方案，但这确实满足了我的迫切需要。@BillCriswell我认为这肯定适用于我的用例，并且比ABDEL的方法更具可重用性。ABDEL的方法在紧要关头工作，但需要向每个需要额外细节的组件添加代码。