摘要:重置組件到初始狀態通過直接強制刷新來達到重置組件的效果,這樣可以重置一些組件的動畫以及組件內初始的數據強制重新生成的實現原理強制重新生成可以通過中的來實現。在更新時,如果值相同則會對原有組件進行復用,如果不同,則會重新生成。
Vue 重置組件到初始狀態
Vue
通過直接強制刷新 DOM 來達到重置組件的效果,這樣可以重置一些組件的動畫以及組件內初始的數據強制重新生成 DOM 的實現
原理:強制重新生成 DOM 可以通過 Vue 中的 key 來實現。在 Vue 更新 Dom 時,如果 key 值相同則會對原有組件進行復用,如果不同,則會重新生成。
代碼示例:
每次點擊 refresh 按鈕,Demo 組件都會重新生成
組件:
/** * Demo.vue */Demo
主頁面:
/** * Index.vue */
注:
對 +new Date() 的說明:
4 個結果一樣,都是返回當前時間的毫秒數
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())
License
可以拷貝、轉發,但是必須提供原作者信息,同時也不能將本項目用于商業用途。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98228.html
摘要:使用目標到目前為止,僅從組件自身的角度來看,它已經可以滿足大多數的業務場景了。但我們會發現一個問題,就是當前組件的狀態對于調用者來說,完全是黑盒狀態,即調用者無法初始化,也無法更改組件的開關狀態,這在一些場景無法滿足需求。 07 使用 State Initializers 目標 到目前為止,僅從 toggle 組件自身的角度來看,它已經可以滿足大多數的業務場景了。但我們會發現一個問題,...
摘要:具有數據收集校驗和提交功能的表單生成器,支持雙向數據綁定和事件擴展,組件包含有復選框單選框輸入框下拉選擇框等表單元素以及省市區三級聯動時間選擇日期選擇顏色選擇滑塊評分框架樹型文件圖片上傳等功能組件。 form-create 具有數據收集、校驗和提交功能的表單生成器,支持雙向數據綁定和事件擴展,組件包含有復選框、單選框、輸入框、下拉選擇框等表單元素以及省市區三級聯動,時間選擇,日期選擇,...
摘要:而的狀態測試更類似于單元測試,和組件的依賴較低,組件只會存在調用模塊的方法或者讀取狀態,在組件頻繁的改動中,而的改動相對會較小,所以狀態測試便會存在一定的價值。 父子組件通信 showImg(https://segmentfault.com/img/remote/1460000010761687); Vuet提供了模塊化的狀態管理,通過對一個組件的注入,再向其子組件進行分發,使得我們可...
摘要:為了做到頁面的極致優化,我們需要將那些閑置的狀態重置,以減小占用的內存空間。不如當路由改變時去重置中的所有狀態。這里只是提供一種重置狀態的一種方案,如果有更好方案還請各位看官留言。 前言 大型單頁應用(后面都是指spa),我們往往會通過使用狀態管理器 vuex 去解決組件間狀態共享與狀態傳遞等問題。這種應用少則幾十個單頁,多則上百個單頁。隨著路由的頻繁切換,每個路由對應的 vuex 中...
摘要:可以配合相關的官方文檔學習。上面的內容說的重點,其實也算是項目的全部啦項目地址感覺還不錯的話就請給個吧謝謝有什么問題歡迎提問 項目地址:vue-simple-template共三個角色:adan barbara carrie 密碼全是:123456 adan 擁有 最高權限A 他可以看到 red , yellow 和 blue 頁面(共三個頁面)barbara 擁有 權限B 他可以看到...
閱讀 2209·2021-11-22 15:29
閱讀 4098·2021-11-04 16:13
閱讀 991·2019-08-29 16:58
閱讀 339·2019-08-29 16:08
閱讀 1457·2019-08-23 17:56
閱讀 2378·2019-08-23 17:06
閱讀 3166·2019-08-23 16:55
閱讀 2058·2019-08-23 16:22