亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么在 Vue 中使用 $refs 時有時需要 $el?

為什么在 Vue 中使用 $refs 時有時需要 $el?

一只甜甜圈 2021-12-02 17:00:29
當按下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。
查看完整描述

1 回答

?
慕雪6442864

TA貢獻1812條經驗 獲得超5個贊

目前, a$ref返回一個 Vue 組件的實例。click()是一種旨在在 DOM 元素上調用的方法(盡管您可以click向組件添加一個方法)。要調用它,您需要實際的 DOM 元素,這就是$el它的用途。$el返回附加給定 Vue 實例的 DOM 節點。

話雖如此,我對為什么它以前有效以及為什么不再有效的最佳猜測是,Vue 將這種行為從一個版本更改為另一個版本,并且當(如果)更改版本時您會注意到它。

造成差異的另一個可能原因是,可能在您之前的用例中,您在標簽上使用了 refs,這些標簽不是 Vue 組件,而是常見的 HTML 標簽。在這種情況下, a$ref仍然會返回一個 DOM 節點。


查看完整回答
反對 回復 2021-12-02
  • 1 回答
  • 0 關注
  • 657 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號