快捷導(dǎo)航

基于Vue中this.$options.data()的this指向問題

更新時(shí)間：2022年03月03日 10:22:54 作者：ds_surk

這篇文章主要介紹了基于Vue中this.$options.data()的this指向問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

this.$options.data()的this指向問題

項(xiàng)目里遇到一個(gè)問題，用this.$options.data()重置組件data時(shí)報(bào)錯(cuò)，原因是因?yàn)閒orm里的rule規(guī)則采用了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是一個(gè)自定義全局變量，想到可能是由于this指向的問題導(dǎo)致找不到$rules.required對(duì)象了。

首先，我們知道，vue中 this.$options.data() 可以獲取原始的data值（只讀），this.$data 獲取當(dāng)前狀態(tài)下的data,在重置data數(shù)據(jù)時(shí)，拷貝重新賦值一下就行了。

如下：

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

這是，如果，你的data數(shù)據(jù)中有采用this的寫法，在調(diào)用this.$options.data() 就會(huì)報(bào)錯(cuò)，因?yàn)閐ata()內(nèi)部的this指向不對(duì)。

vue文檔中有關(guān)于data的指向問題的解釋

如下：

如果你為 data property 使用了箭頭函數(shù)，則 this 不會(huì)指向這個(gè)組件的實(shí)例，不過你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來訪問。

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

這是一種方法，還有一種方法是調(diào)用時(shí)為data函數(shù)指定this。

如下：

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

vue騷操作之this.$options.data()

重置vue組件的data數(shù)據(jù)

在vue單文件組件里有時(shí)需要重置data中的數(shù)據(jù)，比如表單填寫一半，用戶想重新填寫。

<script>
? ? export default {
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 表單
? ? ? ? ? ? ? ? form: {
? ? ? ? ? ? ? ? ? ? input: ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ...
? ? ? ? methods: {
? ? ? ? ? ? // 重置表單方法
? ? ? ? ? ? retset() {
? ? ? ? ? ? ? ? this.form = this.$options.data().form;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ...
? ? }
</script>

也可以通過給組件 $data 對(duì)象賦值來重置來重置整個(gè) $data