Pourquoi "ceci" est-il défini comme non défini dans la fonction Vue 3
P粉057869348
P粉057869348 2023-11-06 10:07:01
0
1
768

Regardez l'exemple de composant simple dans Vue 3 ci-dessous :

<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>

J'essaie de comprendre pourquoi à partir de one()函数调用two()函数时,thistwo()函数中是undefined。两个函数都在setup()中返回,所以我期望它们都能访问this.

Cela dit, que diriez-vous d'une citation en two()函数中获取对组件实例this ?

P粉057869348
P粉057869348

répondre à tous(1)
P粉776412597

Je suppose que Vue doit toujours suivre les règles de JavaScript. Lorsqu'un gestionnaire d'événements est appelé, c'est généralement dans le contexte de l'objet recevant l'événement. Dans ce cas, one()被绑定到<a>元素的Proxy,并且this绑定到Proxy.

Cependant, two()被特别地调用没有上下文(即:two()而不是someobject.foo())。这意味着this sera indéfini.

Je ne connais pas très bien Vue, mais j'imagine qu'il ne lie pas automatiquement les méthodes, vous n'avez donc pas à payer pour quelque chose que vous n'utilisez pas.

En raison de l'appel de méthode de one()this已正确绑定,你实际上可以将two()作为this au lieu d'être appelé comme une simple fonction :

<script>
import { defineComponent } from 'vue'

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

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

function two(){
  console.log(this) //<-- Proxy{}
}
</script>
  
<template>
  <a href="#" @click.prevent="one()">开始</a>
</template>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal