-
Notifications
You must be signed in to change notification settings - Fork 6
在回调函数中访问“正确”的 this #80
Copy link
Copy link
Closed
Labels
JSJavascriptJavascript
Description
需求描述
Vue 的 methods 中调用了 axios 来向后端发送/请求数据,如何在 axios 的回调中访问 Vue 实例的数据(data)?
方案调研
用关键词 how to vue instance inside axios callback 进行 Google,第一个链接就是 Stack Overflow 上的提问,质量应该很高。
提问的网址:javascript - Accessing VUE JS's data from Axios - Stack Overflow。
点进去看,第一个最高票回答给出了在 axios 回调中访问 Vue 实例数据的三种方法:
方案一
创建对 Vue 实例的引用,比如 var self = this,然后在回调中访问。
知识点:以前经常见到 var self = this 的写法,一直不明白有什么用,这次遇到作用域的问题了,终于有点理解了。
方案二
回调函数写成箭头函数,就能直接在回调中访问 Vue 实例了。
知识点:又想起来在一些地方要求不能用箭头函数,也是跟作用域有关,看来需要注意箭头函数的作用域问题。
相关链接:Arrow functions - JavaScript | MDN
方案三
将 axios 用 bind 方法绑定到 Vue 实例上,axios.get().then().bind(this)。
知识点:以前读犀牛书看到 bind 方法,没有多深的体会,现在知道还可以这样用,涨姿势了。
相关链接:Function.prototype.bind() - JavaScript | MDN
拓展阅读
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
JSJavascriptJavascript