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

秒速五厘米 2021-09-25 00:16 762阅读 0赞

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

如下:

  1. rules: {
  2. code: [this.$rules.required()],
  3. name: [this.$rules.required()],
  4. age: [
  5. {min: 1, max: 120, type: 'number', message: '年龄 1 到 120 之间', trigger: 'blur'}
  6. ],
  7. email: [
  8. {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
  9. ]
  10. },

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

首先,我们知道,vue中 this.$options.data() 可以获取原始的data值(只读),this.$data 获取当前状态下的data,在重置data数据时,拷贝重新赋值一下就行了。

如下:

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

这是,如果,你的data数据中有采用this的写法,在调用this.$options.data() 就会报错,因为data()内部的this指向不对。

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

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

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

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

如下:

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

参考:

vue文档

https://blog.csdn.net/mocoe/article/details/89682022

发表评论

表情:
评论列表 (有 0 条评论,762人围观)

还没有评论,来说两句吧...

相关阅读

    相关 this指向问题

    this的指向已经是一个老生常谈的问题,每逢面试都要去复习复习,近来巩固js的基础,决心彻底掌握这个知识点,一劳永逸。说明一下,为了不影响大家的思考过程,下面的代码都不会去注释

    相关 Vuethis指向问题

    Vue中this指向 最近一直在做毕业设计,学习了Vue用来写了很多的前端代码,不得不说js对我这个“Java前端程序员”有些太不友好,时不时都能遇到一些坑,this就是

    相关 Jq this指向问题

    this指向核心的一句 :哪个对象调用函数,函数里面的this指向哪个对象。 1.第一种情况,这个this指向的是全局对象,因为它是在全局调用的 var n