vue 強制刷新組件重新渲染

 

 

 

實現功能：使用富文本編輯器編寫文章，然后把編寫成功的文章用子組件顯示。

問題描述：父組件給子組件傳遞數據，子組件第一次調用數據的時候頁面渲染是正常的，當數據變化的時候，子組件的頁面渲染就失效了。

問題判斷：通過一次次測試發現，第一次打開子組件的時候頁面的渲染是正常的，后面打開之后渲染就失效了。所以初步懷疑是第二次調用組件的時候沒有對數據進行渲染。

 

解決方案一：

當數據變更后,通過watch 監聽，先去銷毀當前的組件，然后再重現渲染。使用 v-if 可以解決這個問題

<template>
   <third-comp v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){
 
                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

 

解決方案二：

通過vue key 實現，原理官方文檔。所以當key 值變更時，會自動的重新渲染。（推薦）

<template>
   <third-comp  :message="menuData"  :key="menuKey"/>
</template>
 
<script>
   export default{
       data(){
          return {
                menuKey:1,
　　　　　        menuData: "",　
            }
       },
       watch:{
             menuData(){
                ++this.menuKey
            }
       }
}
</script>