扫码关注官方订阅号
请看下面的Vue 3中的简单组件示例:
开始
我试图理解为什么在从one()函数调用two()函数时,this在two()函数中是undefined。两个函数都在setup()中返回,所以我期望它们都能访问this。
one()
two()
this
undefined
setup()
话虽如此,那么如何在two()函数中获取对组件实例this的引用呢?
我想Vue仍然需要遵守JavaScript的规则。当事件处理程序被调用时,通常是在接收事件的对象的上下文中。在这种情况下,one()被绑定到<a>元素的Proxy,并且this绑定到Proxy。
<a>
Proxy
然而,two()被特别地调用没有上下文(即:two()而不是someobject.foo())。这意味着this将是未定义的。
someobject.foo()
我对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中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我想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>