Javascript 为什么在Vue中使用$refs时有时需要$el？

当按下ENTER键时，我使用如下代码触发一个单击事件：

<q-tab-panel name="option1" @keyup.enter.native="$refs.button.click()">
...
  <q-btn ref="button" @click="function()" />
...
</q-tab-panel>

...
...

这些标签属于类星体框架的组成部分。这段代码不久前还可以工作，但现在需要进行以下更改：

<q-tab-panel name="option1" @keyup.enter.native="$refs.button.$el.click()">

也就是说，现在使用reference

$refs.按钮。单击（）

会在按下ENTER键时生成错误：

<q-tab-panel name="option1" @keyup.enter.native="$refs.button.click()">
...
  <q-btn ref="button" @click="function()" />
...
</q-tab-panel>

[Vue warn]：v-on处理程序中出错：“TypeError:无法读取未定义的属性'defaultPrevented'”

为什么它以前能工作，为什么现在不能工作？我看到有人提到这与Vue的版本有关，或者引用正在组件中使用，而不是本机DOM元素。看见我也看到了，这并不能回答为什么它以前有效，而现在无效

Vue文档说明了以下关于

$el

：

Vue实例正在管理的根DOM元素

---

这是有道理的，但也不能解释为什么以前不需要它。在我的例子中，错误发生在Vue 2.6.10中。

当前，

$ref

返回Vue组件的实例

click（）

是一种在DOM元素上调用的方法（尽管您可以向组件添加

click

方法）。要调用它，您需要实际的DOM元素，这就是

$el

的用途

$el

返回连接给定Vue实例的DOM节点

话虽如此，我对它以前为什么工作以及为什么不再工作的最好猜测是Vue将此行为从一个版本更改为另一个版本，并且当（如果）更改版本时，您会注意到它

---

造成这种差异的另一个可能原因是，在以前的用例中，您可能对不是Vue组件而是常见HTML标记的标记使用了REF。在这种情况下，

$ref

仍然会返回一个DOM节点。

非常感谢您的回答。我认为是Vue或Quasar改变了一些东西，因为我没有改变以前工作的代码。它可能很简单，现在在

组件中没有

click（）

方法。我会等待其他答案，但你的答案听起来不错！