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

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

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

生命週期鉤子

在提供的範例中：

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

計算屬性

類似地，在計算屬性中：

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

解決方案

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

1. 常規函數：使用常規函數語法，如圖：

2. ECMAScript 5 簡寫： 或者，您可以使用ECMAScript 5 函數簡寫：

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

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