vue 組件銷毀并重置的實(shí)現(xiàn)
更新時(shí)間：2020年01月13日 14:35:08 作者：O槑頭槑腦
這篇文章主要介紹了vue 組件銷毀并重置的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
方法1
當(dāng)數(shù)據(jù)變更后,通過watch 監(jiān)聽，先去銷毀當(dāng)前的組件，然后再重現(xiàn)渲染。使用 v-if 可以解決這個(gè)問題
<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，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
本文為大家介紹下使用js判斷字符長度及中英文數(shù)字等，下面有個(gè)不錯(cuò)的教程，感興趣的朋友可以參考下2013-12-12
JavaScript 中的replace方法說明...2007-04-04
js實(shí)現(xiàn)橫向伸展開的二級導(dǎo)航菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)橫向伸展開的二級導(dǎo)航菜單代碼,涉及javascript鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)顯示隱藏表單文字
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)顯示隱藏表單文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動(dòng)效果,涉及javascript動(dòng)態(tài)操作頁面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下2015-08-08
uni-app操作數(shù)據(jù)庫的三種方法總結(jié)
數(shù)據(jù)庫操作的,可以采用多方案,下面這篇文章主要給大家介紹了關(guān)于uni-app操作數(shù)據(jù)庫的三種方法,文中通過實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了微信小程序日歷插件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了ES6中class關(guān)鍵字,class是es6引入的最重要特性之一。本文通過實(shí)例代碼給大家詳解，需要的朋友可以參考下2017-11-11
webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁面
這篇文章主要介紹了webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁面的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10