为什么在Vue 3函数中"this"被定义为未定义的-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

为什么在Vue 3函数中"this"被定义为未定义的

P粉057869348 2023-11-06 10:07:01

[Vue.js讨论组]

1359

请看下面的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()函数时，this在two()函数中是undefined。两个函数都在setup()中返回，所以我期望它们都能访问this。

话虽如此，那么如何在two()函数中获取对组件实例this的引用呢？

P粉057869348

全部回复(1)

P粉7764125972023-11-07 00:01:40 1楼

我想Vue仍然需要遵守JavaScript的规则。当事件处理程序被调用时，通常是在接收事件的对象的上下文中。在这种情况下，one()被绑定到<a>元素的Proxy，并且this绑定到Proxy。

然而，two()被特别地调用没有上下文（即：two()而不是someobject.foo()）。这意味着this将是未定义的。

我对Vue不是非常熟悉，但我想它不会自动绑定方法，这样就不需要你为你不使用的东西付费。

由于one()中this已正确绑定，你实际上可以将two()作为this的方法调用，而不是作为裸函数调用：

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>