最近做VUE项目,一定让我先吐槽一下VUE这个this的机制。太坑了,在做页面时产生跨域问题,用H5的message解决后,在其中调用this.function();来调用别的方法,但是就出现了property '' is not defined。我明明在methods里面定义了啊??!
methods:{
initMessage() {
var o = this;
window.addEventListener("message", function(e){
if(e.data=="ready"){
o.$options.methods.getStation(o);
}
})
}
}
最后查了大量的资料发现在methods中调用别的方法时this并不会被传递,而是会被替换成window对象。以下是解决方案,调用的方法中使用声明的vue。如:var vue = new vue();或者在调用方法中声明一个变量存储vue对象,然后传递到调用方法中。我的代码中因为声明部分被封装在别的JS里面了,所以这里使用了一个变量来存储VUE对象。