Vue中的this.$options.data()和this.$
2020-10-28 本文已影响0人
PharkiLL
项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下:
export default {
props: {
P: Object
},
data () {
return {
A: {
a: this.methodA
},
B: this.P
};
},
methods: {
resetData () { // 更新时调用
Object.assign(this.$data, this.$options.data()); // 有问题!!!
},
methodA () {
// do sth.
},
methodB () { // 通过用户操作调用
this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined!!!
}
}
}
调用resetData()之后,再调用methodB()时,this.A.a和this.B是undefined。
解决
resetData里这样写:
resetData () { // 更新时调用
Object.assign(this.$data, this.$options.data.call(this));
}
原因
和Vue实例的初始化相关。(源码version2.6.10)
1、new Vue的时候传了一个对象,把该对象记为options,Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.options.data()中的this指向vm.options下,所以this.methodA和this.B为undefined。
总结
data()中若使用了this来访问props或methods,在重置options.data()的this指向,最好使用this.$options.data.call(this)。