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

Question

我正在使用如下代码在按下 ENTER 键时触发 click 事件：

<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 元素的事实。见Is it possible to trigger events using Vue.js?。我也看到了Vue - when and why using $el，它没有回答为什么在它起作用之前它现在不起作用。

Vue 文档中关于$el 的内容如下：

Vue 实例管理的根 DOM 元素。

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

Answer 1

目前，$ref 返回一个 Vue 组件的实例。 click() 是一种用于在 DOM 元素上调用的方法（尽管您可以将 click 方法添加到组件中）。要调用它，您需要实际的 DOM 元素，这就是 $el 的用途。 $el 返回给定 Vue 实例附加到的 DOM 节点。

话虽如此，我对它为什么以前有效以及为什么不再有效的最佳猜测是，Vue 将这种行为从一个版本更改为另一个版本，并且您在（如果）更改版本时注意到了它。

造成差异的另一个可能原因是，在您之前的用例中，您可能在标签上使用了 refs，这些标签不是 Vue 组件，而是常见的 HTML 标签。在这种情况下，$ref 仍然会返回一个 DOM 节点。