vue強(qiáng)制刷新組件的方法示例

更新時(shí)間：2019年02月28日 11:43:57 作者：qq_39985511

這篇文章主要介紹了vue強(qiáng)制刷新組件的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言：

在開發(fā)過程中，有時(shí)候會(huì)遇到這么一種情況，通過動(dòng)態(tài)的賦值，但是dom沒有及時(shí)更新，能夠獲取到動(dòng)態(tài)賦的值，但是無法獲取到雙向綁定的dom節(jié)點(diǎn)，這就需要我們手動(dòng)進(jìn)行強(qiáng)制刷新組件。

官網(wǎng)是這樣說的：

可能你還不大理解，請繼續(xù)往下看，下面是我的一個(gè)例子，來詳細(xì)解說了這個(gè)方法的使用，

第一個(gè)打印結(jié)果

第二個(gè)打印結(jié)果

一、問題描述：父組件通過v-for渲染子組件，刪除子組件數(shù)據(jù)出現(xiàn)異常。

<code class="language-plain"><section v-if="isrefresh" v-for="(sign,index) in signs">  
  <sign-card></sign-card> 
</section></code>

二、問題原因：出現(xiàn)異常的數(shù)據(jù)不是響應(yīng)式依賴，是從vuex讀取的。通過測試發(fā)現(xiàn)，父組件刪除數(shù)據(jù)，沒有重新創(chuàng)建子組件，懷疑是子組件異常的數(shù)據(jù)是讀取的緩存副本。

三、問題解決：根據(jù)v-if改變dom結(jié)構(gòu)的特性，手動(dòng)使子組件重新創(chuàng)建。

1.設(shè)置一個(gè)數(shù)據(jù)變量isrefresh=true

2.初始v-if=isrefresh

3.刪除時(shí),配合$nextTick()DOM渲染回調(diào)函數(shù)，使子組件重新創(chuàng)建

/************************************************************************************************************************************/

PS：vue 強(qiáng)制刷新子組件

把一個(gè)組件重置到初始狀態(tài)是一個(gè)常見的需求，推薦的做法有兩種，一種是父組件重置子組件的 prop，另一種是子組件暴露一個(gè)重置的方法供父組件調(diào)用。但有些時(shí)候，子組件既沒有提供重置的方法，也沒提供 prop 來重置自己的狀態(tài)。更重要的是，這個(gè)子組件我們還動(dòng)不了。于是我們就需要一種 hack 的方式來強(qiáng)制子組件重置到初始狀態(tài)。方法如下：

//   原理就是：采用v-if會(huì)銷毀組件并且重繪，這樣就會(huì)重載組件
// 子組件：自己封裝的組件
  <IncomeStatistics v-if="DestroyIncomeStatistics == true"
              ref="IncomeStatisticsChild"></IncomeStatistics>
// 然后再父組件內(nèi)的增刪改查方法中操作，就好了
this.DestroyIncomeStatistics = false;
// 然后你的方法成功后
// Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。
// 在vue的深入響應(yīng)式原理中有解釋：
// $nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM
  this.$nextTick(() => {
     this.DestroyIncomeStatistics = true;
    });
//這樣的話就會(huì)完成強(qiáng)制刷新

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。