基于Vue中this.$options.data()的this指向问题
this.$options.data()的this指向问题
项目里遇到一个问题,用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骚操作之this.$options.data()
重置vue组件的data数据
在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新玩法
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue使用html2canvas实现将DOM节点生成对应的PDF
这篇文章主要为大家详细介绍了vue如何使用html2canvas实现将DOM节点生成对应的PDF,文中的示例代码简洁易懂,感兴趣的小伙伴可以学习一下2023-08-08vue2.0$nextTick监听数据渲染完成之后的回调函数方法
今天小编就为大家分享一篇vue2.0$nextTick监听数据渲染完成之后的回调函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论