快捷導(dǎo)航

Vue中data數(shù)據(jù)初始化方法詳解

更新時間：2023年05月10日 11:08:06 作者：沉迷...

這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實例化時發(fā)生的，在組件中，可以通過data選項來定義組件的初始數(shù)據(jù)，需要詳細了解可以參考下文

初始化化數(shù)據(jù)的一些方法

Object.assign(this.$data, this.$options.data())
this.$data：當前的data數(shù)據(jù)（修改過后的）；
this.$options.data()：初始化的data數(shù)據(jù)；
Object.assign的作用就是把this.$options.data()的值賦值給this.$data;
// 表單初始化
this.form = this.$options.data().form
//  vue在創(chuàng)建頁面是會把data數(shù)據(jù)綁定到option屬性里，恢復(fù)只需要調(diào)用就可以了

下面詳細說說Object.assign的用法：

ES6的官方文檔的解釋是：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標對象。它將返回目標對象

方法一：

this.數(shù)據(jù)名 = this.$options.data().數(shù)據(jù)名;//重置某一個指定的數(shù)據(jù)

方法二：

this. data = this. data = this. data=this.options.data(); //初始化data里面的所有數(shù)據(jù)

方法三：

Object.assign(this. d a t a , t h i s . data, this. data,this.options.data()) //獲取data源對象，覆蓋當前data對象狀態(tài)

以下是一個簡單的例子

未銷毀數(shù)據(jù)的直接在根元素上使用v-if 只是銷毀了el-dialog組件及其中的數(shù)據(jù) 并沒有銷毀當前組件的數(shù)據(jù)

父組件

<template>
  <div>
    <el-button @click="handleOpen">顯示</el-button>
    <el-button @click="handleCls">隱藏</el-button>
    <Children ref="children" />
  </div>
</template>
<script>
import Children from './children.vue'
export default {
  name: 'Father',
  components: {
    Children
  },
  props: {
  },
  data() {
    return {
    }
  },
  methods: {
    handleOpen() {
      this.$refs.children.dialogFormVisible = true
      self.console.log(this.$refs.children.dialogFormVisible)
    },
    handleCls() {
      this.$refs.children.dialogFormVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

子組件

<template>
  <el-dialog v-if="dialogFormVisible" title="收貨地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="活動名稱" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活動區(qū)域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="請選擇活動區(qū)域">
          <el-option label="區(qū)域一" value="shanghai" />
          <el-option label="區(qū)域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

顯示效果

第一次填寫數(shù)據(jù)

第二次打開

銷毀數(shù)據(jù)的

父組件

<template>
  <div>
    <el-button @click="handleOpen">顯示</el-button>
    <el-button @click="handleCls">隱藏</el-button>
    <Children v-if="dialogShow" ref="children" @handleClose="handleClose" />
  </div>
</template>
<script>
import Children from './children.vue'
export default {
  name: 'Father',
  components: {
    Children
  },
  props: {
  },
  data() {
    return {
      dialogShow: false
    }
  },
  methods: {
    handleOpen() {
      // this.$refs.children.dialogFormVisible = true
      this.dialogShow = true
      // self.console.log(this.$refs.children.dialogFormVisible)
    },
    handleCls() {
      this.dialogShow = false
      // this.$refs.children.dialogFormVisible = false
    },
    handleClose() {
      this.dialogShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

子組件

<template>
  <el-dialog title="收貨地址" :visible="true">
    <el-form :model="form">
      <el-form-item label="活動名稱" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活動區(qū)域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="請選擇活動區(qū)域">
          <el-option label="區(qū)域一" value="shanghai" />
          <el-option label="區(qū)域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>