vue 強制刷新組件

使用vue進行開發(fā)時虽填,如果要刷新當前路由斋日,則調(diào)用router.go(0)方法即可。但是某些情況下恶守,我們可能要求僅僅刷新某個組件贡必,而不是路由,那么我們應(yīng)該怎么做呢衫樊?

1.使用this.$forceUpdate強制重新渲染

如果要在組件內(nèi)部中進行強制刷新,則可以調(diào)用this.$forceUpdate()強制重新渲染組件科侈,從而達到更新目的晋被。

<template>
<button @click="reload()">刷新當前組件</button>
</template>
<script>
export default {
    name: 'comp',
    methods: {
        reload() {
            this.$forceUpdate()
        }
    }
}
</script>

2.使用v-if指令

如果是刷新某個子組件,則可以通過v-if指令實現(xiàn)挂脑。我們知道欲侮,當v-if的值發(fā)生變化時,組件都會被重新渲染一遍威蕉。因此,利用v-if指令的特性牍戚,可以達到強制刷新組件的目的娩贷。

<template>
    <comp v-if="update"></comp>
    <button @click="reload()">刷新comp組件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'parentComp',
    data() {
        return {
            update: true
        }
    },
    methods: {
        reload() {
            // 移除組件
            this.update = false
            // 在組件移除后甜熔,重新渲染組件
            // this.$nextTick可實現(xiàn)在DOM 狀態(tài)更新后哑了,執(zhí)行傳入的方法炕淮。
            this.$nextTick(() => {
                this.update = true
            })
        }
    }
}
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末踩衩,一起剝皮案震驚了整個濱河市匹舞,隨后出現(xiàn)的幾起案子姊舵,更是在濱河造成了極大的恐慌寒匙,老刑警劉巖会宪,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件葵姥,死亡現(xiàn)場離奇詭異削咆,居然都是意外死亡瞻惋,警方通過查閱死者的電腦和手機窄俏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門履植,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鼻种,你說我怎么就攤上這事投队⊙丬剑” “怎么了洞焙?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我刻恭,道長勉抓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任隐圾,我火速辦了婚禮掰茶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己沪伙,他們只是感情好翁授,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布减途。 她就那樣靜靜地躺著税产,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碑隆,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機與錄音子姜,去河邊找鬼楼入。 笑死牧抽,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的阐肤。 我是一名探鬼主播讲坎,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼晨炕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了瓮栗?” 一聲冷哼從身側(cè)響起瞄勾,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤进陡,失蹤者是張志新(化名)和其女友劉穎微服,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盗蟆,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡舒裤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年腾供,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伴鳖。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡榜聂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出须肆,到底是詐尸還是另有隱情,我是刑警寧澤豌汇,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布拒贱,位于F島的核電站,受9級特大地震影響逻澳,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜斜做,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望葱淳。 院中可真熱鬧,春花似錦赞厕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至刮便,卻和暖如春绽慈,著一層夾襖步出監(jiān)牢的瞬間恨旱,已是汗流浹背搜贤。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工仪芒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耕陷,地道東北人。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓铆隘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親南用。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • # 傳智播客vue 學(xué)習(xí)## 1. 什么是 Vue.js* Vue 開發(fā)手機 APP 需要借助于 Weex* Vu...
    再見天才閱讀 3,525評論 0 6
  • VUE Vue :數(shù)據(jù)驅(qū)動的M V Vm框架 m :model(后臺提供數(shù)據(jù))掏湾,v :view(頁面)裹虫,vM(模板...
    wudongyu閱讀 5,374評論 0 11
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,202評論 0 6
  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,187評論 0 25
  • VUE介紹 Vue的特點構(gòu)建用戶界面融击,只關(guān)注View層簡單易學(xué)筑公,簡潔、輕量尊浪、快速漸進式框架 框架VS庫庫匣屡,是一封裝...
    多多醬_DuoDuo_閱讀 2,687評論 1 17