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

Question

当按下ENTER键时，我使用了一段如下所示的代码来触发点击事件：

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

...

  <q-btn ref="button" @click="function()" />

...

</q-tab-panel>

标签属于Quasar Framework 的组件。这段代码不久前还可以工作，但现在需要进行此更改才能工作：

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

也就是说，现在使用引用会$refs.button.click()在按下ENTER时产生错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性‘defaultPrevented’”

为什么它以前有效，为什么现在无效？我看到有人提到它与 Vue 的版本有关，或者引用正在组件中使用而不是原生 DOM 元素的事实。请参阅是否可以使用 Vue.js 触发事件？. 我也看到了Vue - 何时以及为什么使用 $el，它在它工作之前没有回答为什么现在它没有。

Vue 文档说明了以下内容$el：

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

这是有道理的，但在不需要之前也没有解释为什么。就我而言，错误发生在 Vue 2.6.10。

Answer 1

目前， a$ref返回一个 Vue 组件的实例。click()是一种旨在在 DOM 元素上调用的方法（尽管您可以click向组件添加一个方法）。要调用它，您需要实际的 DOM 元素，这就是$el它的用途。$el返回附加给定 Vue 实例的 DOM 节点。话虽如此，我对为什么它以前有效以及为什么不再有效的最佳猜测是，Vue 将这种行为从一个版本更改为另一个版本，并且当（如果）更改版本时您会注意到它。造成差异的另一个可能原因是，可能在您之前的用例中，您在标签上使用了 refs，这些标签不是 Vue 组件，而是常见的 HTML 标签。在这种情况下， a$ref仍然会返回一个 DOM 节点。