基于Vue中this.$options.data()的this指向问题
更新时间：2022年03月03日 10:22:54 作者：ds_surk
这篇文章主要介绍了基于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新玩法
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Nuxt使用Vuex的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue快捷键与基础指令详解,需要的朋友可以参考下2017-06-06
在Vue.js应用开发中,有时候我们需要在组件内部引入外部JavaScript库或脚本文件来增强组件的功能,本文将详细探讨如何在Vue.js项目中安全有效地引用外部JS文件,并提供一系列示例代码来帮助理解这一过程,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue 路由守卫(导航守卫)及其具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue 简单自动补全的输入框的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
在登录页面需要启动向右滑块验证功能,遇到这样的需求怎么实现呢,下面小编通过示例代码给大家分享Vue3滑动到最右验证功能实现,感兴趣的朋友一起看看吧2024-06-06
在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
element-ui自带的图标库不够全，还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程，感兴趣的朋友一起看看吧2018-02-02
elementUI组件中el-date-picker限制时间范围精确到小时的方法
现在需要做一个时间选择器,可以根据小时(同时选天和小时)和天 和月,节假日等类型控制日历的选择样式,下面这篇文章主要给大家介绍了关于elementUI组件中el-date-picker限制时间范围精确到小时的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue自定义指令之面板拖拽的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论