473
社区成员
发帖
与我相关
我的任务
分享关于Vue中data中定义的函数的this指向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<div id="box">
<button @click="one">this指向window</button>
<button @click="two">this指向Vue实例vm</button>
</div>
<body>
<script src="../libs/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data:{
one:function(){
console.log(this)
}
},
methods:{
two:function(){
console.log(this)
}
}
})
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
weixin_38104763 2017-11-21
- 打赏
- 举报
one就是一个很单纯的function，不是类的属性，所以别的地方调用的时候，会指向window。
<button @click="one()"> 的时候，底层是调用了 one.apply(this, args)，这样传入了vm的this。若这个地方你想this都指向Vue对象的时候，建议你这样写data
var vm = new Vue({
el: "#box",
data: function () {
var that = this;
return {
one: function(){
console.log(that);
}
};
},
methods: {
two: function(){
console.log(this);
}
}
})
若是ES6的话，建议用箭头函数
weixin_38104205 2017-11-20
- 打赏
- 举报
求解one函数中的this为什么指向了window，如果这样调用<button @click="one()">this指向window</button>，one中的函数又指向实例，为什么？很不解
