vue 組件銷毀并重置的實現(xiàn)

更新時間：2020年01月13日 14:35:08 作者：O槑頭槑腦

這篇文章主要介紹了vue 組件銷毀并重置的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

方法1

當(dāng)數(shù)據(jù)變更后,通過watch 監(jiān)聽，先去銷毀當(dāng)前的組件，然后再重現(xiàn)渲染。使用 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>

方法2

<template>
 <third-comp :key="menuKey"/>
</template>

<script>
 export default{
   data(){
     return {
        menuKey:1
      }
   },
   watch:{
      menuTree(){

        ++this.menuKey
      }
   }
}
</script>

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

您可能感興趣的文章:

相關(guān)文章

提升頁面加載速度的插件InstantClick
本篇文章主要介紹了提升頁面加載速度的插件InstantClick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js判斷字符長度以及中英文數(shù)字等
本文為大家介紹下使用js判斷字符長度及中英文數(shù)字等，下面有個不錯的教程，感興趣的朋友可以參考下
2013-12-12
JavaScript 中的replace方法說明
JavaScript 中的replace方法說明...
2007-04-04
js實現(xiàn)橫向伸展開的二級導(dǎo)航菜單代碼
這篇文章主要介紹了js實現(xiàn)橫向伸展開的二級導(dǎo)航菜單代碼,涉及javascript鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,需要的朋友可以參考下
2015-08-08
JavaScript實現(xiàn)顯示隱藏表單文字
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)顯示隱藏表單文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Javascript實現(xiàn)可旋轉(zhuǎn)的圓圈實例代碼
這篇文章主要介紹了Javascript實現(xiàn)可旋轉(zhuǎn)的圓圈實例代碼,可實現(xiàn)圓圈的旋轉(zhuǎn)與運動效果,涉及javascript動態(tài)操作頁面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運算的技巧,需要的朋友可以參考下
2015-08-08
uni-app操作數(shù)據(jù)庫的三種方法總結(jié)
數(shù)據(jù)庫操作的,可以采用多方案,下面這篇文章主要給大家介紹了關(guān)于uni-app操作數(shù)據(jù)庫的三種方法,文中通過實例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
微信小程序日歷插件代碼實例
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-12-12
解讀ES6中class關(guān)鍵字
這篇文章主要介紹了ES6中class關(guān)鍵字,class是es6引入的最重要特性之一。本文通過實例代碼給大家詳解，需要的朋友可以參考下
2017-11-11
webix+springmvc session超時跳轉(zhuǎn)登錄頁面
這篇文章主要介紹了webix+springmvc session超時跳轉(zhuǎn)登錄頁面的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-10-10