首頁 > web前端 > js教程 > 為什麼帶有箭頭函數的 Vue.js 元件中的'this”未定義?

為什麼帶有箭頭函數的 Vue.js 元件中的'this”未定義?

Susan Sarandon
發布: 2024-11-28 14:06:14
原創
660 人瀏覽過

Why is

Vue.js 元件中「this」出現意外的未定義值

建構Vue.js 元件時,在生命週期掛鉤中存取“this”或計算屬性可能會產生意外的“未定義”結果。箭頭函數,以語法「() => {}」表示,改變 Vu​​e 實例上下文之外的「this」的綁定。

生命週期鉤子

在提供的範例中:

箭頭函數將「this」綁定到Vue實例之外的範圍,導致到“未定義”評估。

計算屬性

類似地,在計算屬性中:

箭頭函數為「this」導致「無法讀取未定義的屬性'bar'”錯誤。

解決方案

要解決此問題並確保正確引用“this”作為Vue 實例,請考慮使用以下技術:

  1. 常規函數:使用常規函數語法,如圖:
  1. ECMAScript 5 簡寫: 或者,您可以使用ECMAScript 5 函數簡寫:

透過使用這些方法,您可以在Vue.js元件中建立「this」的正確綁定,確保可存取元件的屬性和方法符合預期。

以上是為什麼帶有箭頭函數的 Vue.js 元件中的'this”未定義?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板