vue中this.init⽤法_Vue如何在data中使⽤this绑定methods中
的⽅法？
vuejs data 属性中的 this 指向问题
场景
之前在封装 table 组件 BasicTableVue 的时候遇到的问题，在 data 属性中⽆法使⽤ this.** 调⽤ methods 中的函数。
例如下⾯的代码
class BasicTableData {
constructor({
user = {
name: 'rx',
age: 17,
},
} = {}) {typeof的用法
this.user = user
}
}
class Table extends Vue {
constructor({ data, methods, mounted, computed }) {
super({
data: _.merge(new BasicTableData(), data),
methods,
mounted,
computed,
})
}
}
const table = new Table({
data: {
user: {
birthday: new Date(),
birthdayFormatter: this.calcTime,
},
},
methods: {
calcTime(time) {
ISOString()
},
},
})
// 将输出 undefined
console.log(table.user.birthdayFormatter)
吾辈尝试了⼀下原⽣的 vuejs，发现这样的 data 仍然不能⽤。
解决
后来在官⽅⽂档到了 这⾥，data 如果是⼀个对象或者箭头函数时，不会绑定 this，仅当 data 是⼀个普通函数(使⽤ function 声明)时，才会被绑定 this。
那么，知道了原因，解决⽅案就很简单了。
如果需要使⽤在 data 中使⽤ this 调⽤ methods 中的函数，则 data 必须声明为普通函数
如果需要默认 data defaultData，则 Table 可以将合并后的 data 声明为函数，并将 defaultData 与 data(使⽤ Table 创建实例时传⼊的)的返回值合并
修改后的代码如下
class BasicTableData {
constructor({
user = {
name: 'rx',
age: 17,
},
} = {}) {
this.user = user
}
}
class Table extends Vue {
constructor({ data, methods, mounted, computed }) {
super({
// 关键是这⾥将 data 声明为普通函数
data() {
// 此处为了简洁使⽤ lodash 的深度合并
return _.merge(
new BasicTableData(),
/
/ 此处判断 data 是否为函数，是的话就绑定 this 计算结果
typeof data === 'function' ? data.call(this) : data,
)
},
methods,
mounted,
computed,
})
}
}
const table = new Table({
data: function() {
return {
user: {
birthday: new Date(),
birthdayFormatter: this.calcTime,
},
}
},
methods: {
calcTime(time) {
ISOString()
},
},
})
// 打印的结果是
// ƒ calcTime(time) {
// ISOString()
// }
console.log(table.user.birthdayFormatter)
思考
现在问题解决了，那么，为什么 vuejs 就能够在传⼊ data 函数时就能调⽤ methods 中的函数了呢？吾辈稍微 debug 进⼊源码看了⼀下创建 Table 进⼊构造函数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。