【VUE】重置data中的数据
有时候我们希望每次组件被调用时,初始化data中的数据。是一个对象,对象暴露了当前组件的已解析选项,这里介绍另一种方式,vue实例属性。
·
Vue 2/3
有时候我们希望每次组件被调用时,初始化data中的数据
要是我们把初始化数据复制一遍来进行“重置”就有点不太好看了,例如:
export default {
data(){
return {
product: {
id: -1,
title: '',
}
}
},
created() {
this._initializeData();
},
methods: {
_initializeData()
{
let that = this;
let _data = {
product: {
id: -1,
title: '',
}
}
for (var keyName in _data) {
that[keyName] = _data[keyName]
}
}
}
}
这里介绍另一种方式,vue实例属性$options
官方文档:https://cn.vuejs.org/api/component-instance.html#options
$options
是一个对象,对象暴露了当前组件的已解析选项,
并且会是以下几种可能来源的合并结果:
- 全局 mixin
- 组件
extends
的基组件- 组件级 mixin
有了个简单认识后,我们优化下上面的代码:
export default {
// 以下是改变部分
methods: {
_initializeData()
{
// 整个data重置
Object.assign(this.$data, this.$options.data.call(this))
// 针对product重置
this.$data.product = this.$options.data.call(this).product
}
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)