vue 刷新組件

主要思想就是使用v-if銷(xiāo)毀和重新渲染組件,達(dá)到強(qiáng)制刷新組件的目的。

<template>
  <div id="App">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
  export default {
  name: 'App',
  data () {
    return {
      isRouterAlive: true
  },

// 把刷新組件的方法傳給子組件
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload () {  //   調(diào)用該方法可刷新組件
      this.isRouterAlive = false
      this.$nextTick(() => {    //$nextTick() 方法傳入一個(gè)回調(diào)函數(shù),在下一次渲染頁(yè)面時(shí)調(diào)用該回調(diào)
        this.isRouterAlive = true
      })
    }
  }
}
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • vue 強(qiáng)制刷新組件 使用vue進(jìn)行開(kāi)發(fā)時(shí),如果要刷新當(dāng)前路由,則調(diào)用router.go(0)方法即可。但是某些情...
    Sallyzqc閱讀 684評(píng)論 0 0
  • 使用vue進(jìn)行開(kāi)發(fā)時(shí),如果要刷新當(dāng)前路由,則調(diào)用router.go(0)方法即可。但是某些情況下,我們可能要求僅僅...
    我啊翔1314閱讀 134,454評(píng)論 1 19
  • Vue組件刷新解決方案: 刷新整個(gè)頁(yè)面 使用v-if標(biāo)記 forceUpdate key-changing 1.刷...
    子語(yǔ)喵閱讀 4,307評(píng)論 0 3
  • 在項(xiàng)目中會(huì)有一種場(chǎng)景,例如:在酒店詳情頁(yè)面中,最下面有一個(gè)推薦類(lèi)似酒店的列表,此時(shí)點(diǎn)擊之后業(yè)務(wù)邏輯依然是當(dāng)前頁(yè)面,...
    喲西大人1閱讀 914評(píng)論 1 1
  • 原文:https://michaelnthiessen.com/force-re-render/[https://...
    studentliubo閱讀 18,335評(píng)論 0 4

友情鏈接更多精彩內(nèi)容