為什麼在Vue 3函數中"this"被定義為未定義的
P粉057869348
P粉057869348 2023-11-06 10:07:01

請看下面的Vue 3中的簡單元件範例:

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Test',
  setup(){
    return{
      one,
      two
    }
  }
})

function one(){
  console.log(this) //<-- Proxy{}
  two()
}

function two(){
  console.log(this) //<-- undefined
}
</script>
  
<template>
  <a href="#" @click.prevent="one()">开始</a>
</template>

我試著去理解為什麼在從one()函數呼叫two()函數時,thistwo()函數中是undefined。兩個函數都在setup()中返回,所以我期望它們都能存取this

話雖如此,那麼如何在two()函數中取得元件實例this的參考呢?

P粉057869348
P粉057869348

全部回覆(1)
P粉776412597

我想Vue仍然需要遵守JavaScript的規則。當事件處理程序被呼叫時,通常是在接收事件的物件的上下文中。在這種情況下,one()被綁定到元素的Proxy,並且this綁定到Proxy

然而,two()被特別地呼叫沒有上下文(即:two()而不是someobject.foo())。這意味著this將是未定義的。

我對Vue不是非常熟悉,但我想它不會自動綁定方法,這樣就不需要你為你不使用的東西付費。

由於one()this已正確綁定,你實際上可以將two()作為this的方法調用,而不是作為裸函數調用:


  
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!