Vue 重置組件到初始狀態(tài)的方法示例

更新時間：2018年10月10日 10:10:12 作者：spolier

這篇文章主要介紹了Vue 重置組件到初始狀態(tài)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Vue

通過直接強制刷新 DOM 來達到重置組件的效果，這樣可以重置一些組件的動畫以及組件內(nèi)初始的數(shù)據(jù)

強制重新生成 DOM 的實現(xiàn)

原理：強制重新生成 DOM 可以通過 Vue 中的 key 來實現(xiàn)。在 Vue 更新 Dom 時，如果 key 值相同則會對原有組件進行復(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é)果一樣,都是返回當前時間的毫秒數(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)印章徽章組件的示例代碼
這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的印章徽章控件，文中通過示例代碼講解詳細，需要的朋友們下面就跟隨小編來一起學(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
vue實現(xiàn)div高度可拖拽
這篇文章主要為大家詳細介紹了vue實現(xiàn)div高度可拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue實現(xiàn)時間軸效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)時間軸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue axios同步請求解決方案
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下
2017-09-09
vue 集成jTopo 處理方法
這篇文章主要介紹了vue 集成jTopo 處理方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-08-08
vue后臺項目如何使用router.addRoutes動態(tài)加入路由的思路
這篇文章主要介紹了vue后臺項目如何使用router.addRoutes動態(tài)加入路由的思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue項目在安卓低版本機顯示空白的原因分析(兩種)
本文給大家?guī)韛ue項目在安卓低版本機顯示空白的原因分析，根據(jù)各自需求給大家?guī)砹藘煞N原因分析，大家可以參考下
2018-09-09
使用vue3實現(xiàn)簡單的滑塊組件
這篇文章主要給大家介紹一下如何使用vue3實現(xiàn)簡單的滑塊組件,文中有詳細的代碼示例講解,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧
2023-08-08
Vue全局攔截所有請求并在請求頭中添加token方式
這篇文章主要介紹了Vue全局攔截所有請求并在請求頭中添加token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08