时间：2022-06-22 09:39:03 | 栏目：vue | 点击：次
项目里遇到一个问题，用this.$options.data()重置组件data时报错，原因是因为form里的rule规则采用了this写法。
如下：
rules: {
code: [this.$rules.required()],
name: [this.$rules.required()],
age: [
{min: 1, max: 120, type: 'number', message: '年龄 1 到 120 之间', trigger: 'blur'}
],
email: [
{type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
]
},
this.$rules是一个自定义全局变量，想到可能是由于this指向的问题导致找不到$rules.required对象了。
首先，我们知道，vue中 this.$options.data() 可以获取原始的data值（只读），this.$data 获取当前状态下的data,在重置data数据时，拷贝重新赋值一下就行了。
如下：
Object.assign(this.$data, this.$options.data());
这是，如果，你的data数据中有采用this的写法，在调用this.$options.data() 就会报错，因为data()内部的this指向不对。
如下：
如果你为 data property 使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
data: vm => ({ a: vm.myProp })
这是一种方法，还有一种方法是调用时为data函数指定this。
如下：
Object.assign(this.$data, this.$options.data.call(this));
在vue单文件组件里有时需要重置data中的数据，比如表单填写一半，用户想重新填写。
<script>
export default {
data() {
return {
// 表单
form: {
input: ''
}
}
},
...
methods: {
// 重置表单方法
retset() {
this.form = this.$options.data().form;
}
},
...
}
</script>
也可以通过给组件 $data 对象赋值来重置来重置整个 $data
this.$data = this.$options.data();
vue组件可以通过 this.$options 对象获取你编写的任何方法，比如 created( ) 生命周期函数，发现vue新玩法