溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue
通過直接強制刷新 DOM 來達到重置組件的效果，這樣可以重置一些組件的動畫以及組件內初始的數據
強制重新生成 DOM 的實現
原理：強制重新生成 DOM 可以通過 Vue 中的 key 來實現。在 Vue 更新 Dom 時，如果 key 值相同則會對原有組件進行復用，如果不同，則會重新生成。
代碼示例：
每次點擊 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 個結果一樣,都是返回當前時間的毫秒數
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())
補充：vue強制刷新組件
把一個組件重置到初始狀態是一個常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個重置的方法供父組件調用。但有些時候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態。更重要的是，這個子組件我們還動不了。于是我們就需要一種 hack 的方式來強制子組件重置到初始狀態。方法如下：
<component v-if="hackReset"></component>
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})
v-if 在切換時，元素及它的綁定數據和組件都會被銷毀并重建
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
