vue組件局部刷新

vue局部刷新是對數據修改了或者刪除了等操做，數據應該顯示我們操做後的狀態的，可是從新請求axios是很是消耗內存的，此時應該是組件的局部刷新，那麼如何實現vue組件的局部刷新呢？如下講述了方法，但願能夠幫助到你們。

1、在 app.vue 中定義全局方法

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide(){
    return {
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive: true
    }
  },
  methods: {
   reload () {
     this.isRouterAlive = false
     this.$nextTick(() => (this.isRouterAlive = true))
   }   
 }
}
</script>

定義了全局 reload() 方法; 原理就是經過控制組件容器的出現與消失,達到從新渲染的效果,從而實現咱們的目的。

2、在全局中定義了刷新的方法, 接下來就是要引入到須要刷新的組件中。

<script>
import axios from "axios";
export default {
  inject:["reload"],
  name: "StoreServiceProjectManagement",
  data() {
    return {
       
    }
  },
  mounted() {
    this.reload();
  }
};
</script>

經過 inject 方法引入到須要的組件中, 直接this.reload() 調用這個方法便可。

碼字不易，點個讚唄💗，支持支持

相關推薦：
jquery操做樣式 jq修改添加css樣式和class樣式類
java面試題最容易犯錯的8道題
java能夠對map的key排序嗎
java中常見的幾種鎖有哪些
關於Java的三種隨機數生成方式介紹
仿京東驗證碼效果代碼

閱讀原文