Vue 重置組件到初始狀態(tài)的方法示例
Vue
通過(guò)直接強(qiáng)制刷新 DOM 來(lái)達(dá)到重置組件的效果，這樣可以重置一些組件的動(dòng)畫以及組件內(nèi)初始的數(shù)據(jù)
強(qiáng)制重新生成 DOM 的實(shí)現(xiàn)
原理：強(qiáng)制重新生成 DOM 可以通過(guò) Vue 中的 key 來(lái)實(shí)現(xiàn)。在 Vue 更新 Dom 時(shí)，如果 key 值相同則會(huì)對(duì)原有組件進(jìn)行復(fù)用，如果不同，則會(huì)重新生成。
代碼示例：
每次點(diǎn)擊 refresh 按鈕，Demo 組件都會(huì)重新生成
組件：
/**
* Demo.vue
*/
<template>
<div>Demo</div>
</template>
<script>
export default {
data () {
return {}
},
created: function () {
console.log('created')
}
}
</script>
主頁(yè)面：
/**
* Index.vue
*/
<template>
<div>
<Demo :key="id"></Demo>
<button @click="refresh">refresh</button>
</div>
</template>
<script>
import Demo from './Demo'
export default {
data () {
return {
id: +new Date()
}
},
methods: {
refresh: function () {
this.id = +new Date()
}
},
components: {
Demo
}
}
</script>
注：
對(duì) +new Date() 的說(shuō)明：
4 個(gè)結(jié)果一樣,都是返回當(dāng)前時(shí)間的毫秒數(shù)
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())
補(bǔ)充：vue強(qiáng)制刷新組件
把一個(gè)組件重置到初始狀態(tài)是一個(gè)常見(jiàn)的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個(gè)重置的方法供父組件調(diào)用。但有些時(shí)候，子組件既沒(méi)有提供重置的方法，也沒(méi)提供 prop 來(lái)重置自己的狀態(tài)。更重要的是，這個(gè)子組件我們還動(dòng)不了。于是我們就需要一種 hack 的方式來(lái)強(qiáng)制子組件重置到初始狀態(tài)。方法如下：
<component v-if="hackReset"></component>
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})
v-if 在切換時(shí)，元素及它的綁定數(shù)據(jù)和組件都會(huì)被銷毀并重建
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2中組件互相調(diào)用實(shí)例methods中的方法實(shí)現(xiàn)詳解
vue在同一個(gè)組件內(nèi),方法之間經(jīng)常需要互相調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue2中組件互相調(diào)用實(shí)例methods中的方法實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
我們用Vue3開(kāi)發(fā)項(xiàng)目時(shí),常常需要面對(duì)的一個(gè)問(wèn)題就是組件之間的通信,如何將數(shù)據(jù)發(fā)給對(duì)應(yīng)的組件,這是不可避免的一個(gè)問(wèn)題,該篇講述了Vue3常用的6種組件通信方式,需要的朋友可以參考下2024-09-09
vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
當(dāng)el-select的disabled屬性為true的時(shí)候不展示“請(qǐng)選擇”字樣,如何去掉el-select 元素的 placeholder 屬性呢,下面小編通過(guò)示例代碼給大家分享el-select如何去掉placeholder屬性,感興趣的朋友一起看看吧2023-12-12
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vuejs實(shí)現(xiàn)遞歸樹(shù)型菜單組件
本篇文章主要介紹了vuejs實(shí)現(xiàn)遞歸樹(shù)型菜單組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時(shí)候觸發(fā)
這篇文章主要介紹了聊聊vue生命周期鉤子函數(shù)有哪些，分別什么時(shí)候觸發(fā)？具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細(xì)用法,文中通過(guò)代碼介紹是非常詳細(xì),需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過(guò)程解析(面向新手)
這篇文章主要介紹了vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題的解決辦法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-04-04