H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue组件内更新DOM绑定方法,this的指向竟然不是VueComponent对象?

组件代码如下,我在网页上触发更新后的add方法,打印出来的this竟然是window?

Vue.component('button-counter', {
data: function() {
return {
count: 0,
value: 1
}
},
mounted() {
let async = Promise.resolve();
async.then(_ => {
this.count++
this.add = function() {
console.log(this)
}
})
},
methods: {
add: function() {
console.log(0)
}
},
template: '<div><button v-on:click="add">You clicked me {{ count }} times.</button></div>'
})

回答

function() {
  console.log(this);
}
//函数会有作用域,可以使用箭头函数
() => { console.log(this); }

楼上说的很明确了,详见 MDN 函数上下文

你的this本身就不是在vue组件里 而是promise里
老实点定义一个变量指向vue组件不好吗 明确省的this都不知道指到哪去

mounted() {
    var _this = this
    let async = Promise.resolve();
    async.then(_ => {
        _this.count++
        _this.add = function() {
            console.log(_this)
        }
    })
},

本文地址:H5W3 » vue组件内更新DOM绑定方法,this的指向竟然不是VueComponent对象?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址