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

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

项目里遇到一个问题，用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指向不对。

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

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

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

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

如下：

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

参考：

[vue文档][vue]

[https://blog.csdn.net/mocoe/article/details/89682022][https_blog.csdn.net_mocoe_article_details_89682022]

[vue]: https://cn.vuejs.org/v2/api/#data
[https_blog.csdn.net_mocoe_article_details_89682022]: https://blog.csdn.net/mocoe/article/details/89682022

发表评论取消回复

表情：

评论列表（有 0 条评论，710人围观）

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

相关阅读

相关 javascript的this指向问题

关于this指向问题一直是js基础的热门问题，最近参与公司面试问过很多面试者总觉得有点模糊。所以自己想着总结一下： this的指向在函数定义的时候是确定不了的，只有在函数执行

r囧r小猫/ 2022年12月27日 14:04/ 0 赞/ 166 阅读

相关 this的指向问题

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

一时失言乱红尘/ 2022年05月21日 08:48/ 0 赞/ 281 阅读

相关 VUE使用过程中，this指向发生变化的问题

在最近的项目中，需要将vue与一个第三方的框架整合，在该框架的一个方法中,原来与vue整合好的UI框架的一些隐式组件无法使用（这些组件的调用方式是this.xxx.ooo..

绝地灬酷狼/ 2022年05月16日 11:16/ 0 赞/ 108 阅读

相关 Vue中this的指向问题

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

红太狼/ 2022年03月29日 01:51/ 0 赞/ 278 阅读

相关 vue里面的this指向

this.$http.jsonp(api).then(function(response){ console.log(response);

喜欢ヅ旅行/ 2022年01月06日 04:45/ 0 赞/ 223 阅读

相关 Jq this的指向问题

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

迷南。/ 2021年12月11日 12:11/ 0 赞/ 304 阅读

相关 js的this指向问题和Vue的指向问题详细解析

Vue的this的指向和js的this的指向的问题 js函数的this指向 1.1:js中的this指向记住一个原则：一般情况下（箭头函数除外）

叁歲伎倆/ 2021年12月09日 07:34/ 0 赞/ 561 阅读

相关在定时器中，vue的this指向问题

1. 箭头函数中的this指向是固定不变（定义函数时的指向），在vue中指向vue 2. 普通函数中的this指向是变化的（使用函数时的指向），谁调用的指向谁 1

墨蓝/ 2021年11月29日 15:12/ 0 赞/ 262 阅读

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

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

秒速五厘米/ 2021年09月25日 00:16/ 0 赞/ 711 阅读

相关 async中的this指向问题

![在这里插入图片描述][20190320151141362.png] 有async函数的地方要用this需要在async外部把this赋值给一个变量，再使用，否则直接再

落日映苍穹つ/ 2021年09月18日 13:34/ 0 赞/ 612 阅读