收到錯誤無法讀取未定義的屬性(讀取“$refs”)儘管我在模板中有一個引用。這是否意味著我必須使用 Vue 掛鉤鉤子?
<div class="input-wrapper"> <input type="text" id="phone" placeholder="(555) 555-5555" ref="input"/> </div> <script> this.$refs.input.addEventLis tener('input', function () { // some code }); </script>
在 Vue 元件的
的根内部,在 Vue 2 和 Vue 3 中,
this
是未定义
:查看此處。 。 p>
Vue 模板引用只能在發生的任何鉤子或方法內存取在元件安裝之後和卸載之前。
這表示最早您可以引用的
this.$refs
位於已安裝。 最新位於 beforeUnmount 。您也可以在這兩個時刻之間發生的任何掛鉤或方法中存取它們。考慮到您正在嘗試向HTMLInputElement 添加事件偵聽器,我建議使用v-on 指令,該指令會在掛載時自動新增事件偵聽器,並在卸載時將其刪除。
就您而言:
順便說一句,您應該知道常規函數的
this
無法存取元件上下文,除非它是箭頭函數:而在任何方法中(例如:上面的
myFn
),this
是元件上下文,它可以存取所有元件成員。