Vue 重置組件到初始狀態(tài)的方法示例
Vue
通過直接強制刷新 DOM 來達(dá)到重置組件的效果，這樣可以重置一些組件的動畫以及組件內(nèi)初始的數(shù)據(jù)
強制重新生成 DOM 的實現(xiàn)
原理：強制重新生成 DOM 可以通過 Vue 中的 key 來實現(xiàn)。在 Vue 更新 Dom 時，如果 key 值相同則會對原有組件進(jìn)行復(fù)用，如果不同，則會重新生成。
代碼示例：
每次點擊 refresh 按鈕，Demo 組件都會重新生成
組件：
/**
* Demo.vue
*/
<template>
<div>Demo</div>
</template>
<script>
export default {
data () {
return {}
},
created: function () {
console.log('created')
}
}
</script>
主頁面：
/**
* 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>
注：
對 +new Date() 的說明：
4 個結(jié)果一樣,都是返回當(dāng)前時間的毫秒數(shù)
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())
補充：vue強制刷新組件
把一個組件重置到初始狀態(tài)是一個常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個重置的方法供父組件調(diào)用。但有些時候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態(tài)。更重要的是，這個子組件我們還動不了。于是我們就需要一種 hack 的方式來強制子組件重置到初始狀態(tài)。方法如下：
<component v-if="hackReset"></component>
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})
v-if 在切換時，元素及它的綁定數(shù)據(jù)和組件都會被銷毀并重建
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的印章徽章控件，文中通過示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue3 組件間通信之mitt實現(xiàn)任意組件間通信的步驟
mitt 主要有4個API：emit（觸發(fā)某個事件）、on（綁定事件）、off（解綁某個事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實現(xiàn)任意組件間通信,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)div高度可拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)時間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了vue 集成jTopo 處理方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08
vue后臺項目如何使用router.addRoutes動態(tài)加入路由的思路
這篇文章主要介紹了vue后臺項目如何使用router.addRoutes動態(tài)加入路由的思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文給大家?guī)韛ue項目在安卓低版本機顯示空白的原因分析，根據(jù)各自需求給大家?guī)砹藘煞N原因分析，大家可以參考下2018-09-09
這篇文章主要給大家介紹一下如何使用vue3實現(xiàn)簡單的滑塊組件,文中有詳細(xì)的代碼示例講解,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
Vue全局?jǐn)r截所有請求并在請求頭中添加token方式
這篇文章主要介紹了Vue全局?jǐn)r截所有請求并在請求頭中添加token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08