Vue无法获得$refs的id值(已解决)

我看到关于vue $refs的文档，不过不太清楚如何获得id的值？我尝试使用console.log(this.$ refs.dataInfo.id)是未定义的。我只好在Stack Overflow网站去问问，后来得到了解决答案！

看看图片：

Javascript文件：

console.log(this.$ refs.dataInfo.id)

HTML文件：

<tab-item v-for="item in category" :id="item.id" ref="dataInfo">{{item.name}}</tab-item>

网友给我一些建议有两种方法解决方案：

使用事件。当子组件中的道具改变，并且你想在父组件中做些什么时，你应该发出一个自定义事件。你可以在子组件中做这样的事情:this.$emit('dataChange',data)。然后在父组件中添加一个事件监听器@dataChange="myMethod"给组件。
使用Vuex
对数据在应用程序中流动的基本概念有一个很好的理解是必须的，不应该被忽视！

已解决：

this.$refs.dataInfo[0]['$el'].id