vue強制刷新組件的方法示例
前言:
在開發(fā)過程中,有時候會遇到這么一種情況,通過動態(tài)的賦值,但是dom沒有及時更新,能夠獲取到動態(tài)賦的值,但是無法獲取到雙向綁定的dom節(jié)點,這就需要我們手動進行強制刷新組件。
官網是這樣說的:
可能你還不大理解,請繼續(xù)往下看,下面是我的一個例子,來詳細解說了這個方法的使用,
第一個打印結果
第二個打印結果
一、問題描述:父組件通過v-for渲染子組件,刪除子組件數據出現(xiàn)異常。
<code class="language-plain"><section v-if="isrefresh" v-for="(sign,index) in signs"> <sign-card></sign-card> </section></code>
二、問題原因:出現(xiàn)異常的數據不是響應式依賴,是從vuex讀取的。通過測試發(fā)現(xiàn),父組件刪除數據,沒有重新創(chuàng)建子組件,懷疑是子組件異常的數據是讀取的緩存副本。
三、問題解決:根據v-if改變dom結構的特性,手動使子組件重新創(chuàng)建。
1.設置一個數據變量isrefresh=true
2.初始v-if=isrefresh
3.刪除時,配合$nextTick()DOM渲染回調函數,使子組件重新創(chuàng)建
/************************************************************************************************************************************/
PS:vue 強制刷新子組件
把一個組件重置到初始狀態(tài)是一個常見的需求,推薦的做法有兩種,一種是父組件重置子組件的 prop,另一種是子組件暴露一個重置的方法供父組件調用。但有些時候,子組件既沒有提供重置的方法,也沒提供 prop 來重置自己的狀態(tài)。更重要的是,這個子組件我們還動不了。于是我們就需要一種 hack 的方式來強制子組件重置到初始狀態(tài)。方法如下:
// 原理就是:采用v-if會銷毀組件并且重繪,這樣就會重載組件 // 子組件:自己封裝的組件 <IncomeStatistics v-if="DestroyIncomeStatistics == true" ref="IncomeStatisticsChild"></IncomeStatistics> // 然后再父組件內的增刪改查方法中操作,就好了 this.DestroyIncomeStatistics = false; // 然后你的方法成功后 // Vue 實現(xiàn)響應式并不是數據發(fā)生變化之后 DOM 立即變化,而是按一定的策略進行 DOM 的更新。 // 在vue的深入響應式原理中有解釋: // $nextTick 是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調,在修改數據之后使用 $nextTick,則可以在回調中獲取更新后的 DOM this.$nextTick(() => { this.DestroyIncomeStatistics = true; }); //這樣的話就會完成強制刷新
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue如何監(jiān)測數組類型數據發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測數組類型數據發(fā)生改變的,本文通過實例代碼圖文詳解給大家講解的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11移動端底部導航固定配合vue-router實現(xiàn)組件切換功能
經常遇到這樣的需求,移動端中的導航并不是在頂部也不是在底部,而是在最底部且是固定的,當我們點擊該導航項時會切換到對應的組件。這篇文章主要介紹了移動端底部導航固定配合vue-router實現(xiàn)組件切換功能,需要的朋友可以參考下2019-06-06一款移動優(yōu)先的Solid.js路由solid router stack使用詳解
這篇文章主要為大家介紹了一款移動優(yōu)先的Solid.js路由solid router stack使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08element?ui?el-calendar日歷組件使用方法總結
這篇文章主要給大家介紹了關于element?ui?el-calendar日歷組件使用方法的相關資料,elementui是一款基于Vue.js的UI框架,其中的日歷組件calendar是elementui中非常常用的組件之一,需要的朋友可以參考下2023-07-07VueJs中的shallowRef與shallowReactive函數使用比較
這篇文章主要為大家介紹了VueJs中的shallowRef與shallowReactive函數的使用比較解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04Vue循環(huán)中多個input綁定指定v-model實例
這篇文章主要介紹了Vue循環(huán)中多個input綁定指定v-model實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08