Vue中data數(shù)據(jù)初始化方法詳解
當(dāng)組件的根元素使用了v-if的時(shí)候, 并不會(huì)初始化data中的數(shù)據(jù) 如果想完全銷毀該組件并且初始化數(shù)據(jù),需要在使用該組件的本身添加v-if 或者是手動(dòng)初始化該組件中的數(shù)據(jù)
初始化化數(shù)據(jù)的一些方法
Object.assign(this.$data, this.$options.data()) this.$data:當(dāng)前的data數(shù)據(jù)(修改過(guò)后的); this.$options.data():初始化的data數(shù)據(jù); Object.assign的作用就是把this.$options.data()的值賦值給this.$data; // 表單初始化 this.form = this.$options.data().form // vue在創(chuàng)建頁(yè)面是會(huì)把data數(shù)據(jù)綁定到option屬性里,恢復(fù)只需要調(diào)用就可以了
下面詳細(xì)說(shuō)說(shuō)Object.assign的用法:
ES6的官方文檔的解釋是:Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象
方法一:
this.數(shù)據(jù)名 = this.$options.data().數(shù)據(jù)名;//重置某一個(gè)指定的數(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源對(duì)象,覆蓋當(dāng)前data對(duì)象狀態(tài)
以下是一個(gè)簡(jiǎn)單的例子
未銷毀數(shù)據(jù)的 直接在根元素上使用v-if 只是銷毀了el-dialog組件及其中的數(shù)據(jù) 并沒(méi)有銷毀當(dāng)前組件的數(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="活動(dòng)名稱" :label-width="formLabelWidth"> <el-input v-model="form.name" autocomplete="off" /> </el-form-item> <el-form-item label="活動(dòng)區(qū)域" :label-width="formLabelWidth"> <el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(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>
顯示效果
第一次填寫(xiě)數(shù)據(jù)
第二次打開(kāi)
銷毀數(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="活動(dòng)名稱" :label-width="formLabelWidth"> <el-input v-model="form.name" autocomplete="off" /> </el-form-item> <el-form-item label="活動(dòng)區(qū)域" :label-width="formLabelWidth"> <el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(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>
顯示效果
第一次填寫(xiě)
第二次打開(kāi)數(shù)據(jù)已經(jīng)清空了
到此這篇關(guān)于Vue中data數(shù)據(jù)初始化方法詳解的文章就介紹到這了,更多相關(guān)Vue data數(shù)據(jù)初始化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決父組件將子組件作為彈窗調(diào)用只執(zhí)行一次created的問(wèn)題
這篇文章主要介紹了解決父組件將子組件作為彈窗調(diào)用只執(zhí)行一次created的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07詳解Vue如何實(shí)現(xiàn)響應(yīng)式布局
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)響應(yīng)式布局的兩種方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-12-12vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-06-06