为什么在 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 warn]: Error in v-on handler: "TypeError: Cannot read property 'defaultPrevented' of undefined"

为什么以前能用，为什么现在不能用了？我看到有人提到它与 Vue 的版本有关，或者在组件中使用引用而不是本机 DOM 元素。请参阅 . I have also seen ，它没有回答为什么之前有效而现在无效的原因。

Vue 文档对 $el 的描述如下：

The root DOM element that the Vue instance is managing.

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

Answer 1

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

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

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

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

Why is $el sometimes necessary when using $refs in Vue?

javascript

vuejs2

quasar-framework