使用vue $ refs无法获取id的值？

Question

我看到关于vue $ refs文件，控制台看到的是{}，我不知道如何获取id的值？ 有{ }没有对象，如何获取$ refs id的值，但我认为{}没有得到对象。我尝试使用console.log(this.$refs.dataInfo.id)是undefined。< / p>

看看图片：

javascript文件：

console.log(this.$refs)

HTML文件：

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

Answer 1

console.log(this.$refs.dataInfo.id)是undefined，因为您试图通过对组件的引用来访问元素的属性。根据您的示例对象，您可以像这样访问它：this.$refs.dataInfo[0]['$el'].id

我相信这是一种奇怪的做法。 Vue的做法是：

1. 使用events。当子组件中的props更改并且您想要在父组件中对其执行某些操作时，您应该发出自定义事件。您可以在子组件中执行以下操作：this.$emit('dataChange', data)。在父组件中，向组件添加事件侦听器@dataChange="myMethod"。
2. 使用Vuex。

充分理解基本概念，例如数据如何在应用程序中流动是必须的，不应该被忽视！