Vue this.$options.data()的this指向

302 阅读1分钟

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

rules: (() => {
        const { validateEmpty, validateTwoDecimalReg } = this.$validate;
        return this.$validateRules({
          baseIma01: [{ required: true, validator: validateEmpty, trigger: 'blur' }],
          baseIma06: [{ required: true, validator: validateEmpty, trigger: 'change' }],
          baseIma16: [{ required: true, validator: validateEmpty, trigger: 'change' }],
          baseIma11: [{ required: true, validator: validateTwoDecimalReg, trigger: 'blur' }],
          baseIma12: [{ required: true, validator: validateTwoDecimalReg, trigger: 'blur' }],
          baseIma13: [{ required: true, validator: validateTwoDecimalReg, trigger: 'blur' }],
          baseIma09: [{ required: true, validator: validateTwoDecimalReg, trigger: 'blur' }],
          baseIma10: [{ required: true, validator: validateTwoDecimalReg, trigger: 'blur' }],
          baseIma14: [{ required: true, validator: validateTwoDecimalReg, trigger: 'blur' }],
        });
      })(),

this.rules是一个自定义全局变量,想到可能是由于this指向的问题导致找不到rules是一个自定义全局变量,想到可能是由于this指向的问题导致找不到rules.required对象了。

首先,我们知道,vue中 this.options.data()可以获取原始的data值(只读),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));