为什么在Vue 3函数中"this"被定义为未定义的
P粉057869348
P粉057869348 2023-11-06 10:07:01
[Vue.js讨论组]

请看下面的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()被绑定到<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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号