快捷導航

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屬性里，恢復只需要調(diào)用就可以了

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

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

方法一：

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>