Vue中的this.$options.data()的this指向问题

项目里遇到一个问题，用this.$options.data()重置组件data时报错，原因是因为form里的rule规则采用了this写法。

如下:

　　data() {
　　　　return {　　
　　　　　　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'}
        　　]
      　　},

　　　　　　　　orderForm: {

                subsystemCode: '',

                description: '',

                locationNameLink: '',

                linkName: '',

                linkPhone: '',

                classifyNo: '',

            },

　　　　　　}

　　}

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指向不对。

vue文档中有关于data的指向问题的解释，如下：

如果你为 data property 使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

data: vm => ({ a: vm.myProp })

这是一种方法，还有一种方法是调用时为data函数指定this。

如下：

Object.assign(this.$data, this.$options.data.call(this));

 

初始化orderForm的值：

Object.assign(this.$data.orderForm, this.$options.data().orderForm); // 初始化数据


this.$refs.orderForm.resetFields(); // 去除校验
this.$refs.orderForm.clearValidate(); // 去除校验

　

初始化data某个属性的值

 

this.params = this.$options.data().params