Vue 組件局部刷新

Vue中對數據進行增刪改查的操作之后, 希望頁面顯示的是我們操作之后最新的數據, 為了避免重新做axios請求, 此時用到組件的刷新是很方便的了, 以下便是我做項目中總結的組件局部刷新的方法:

    第一步 : 在 app.vue 中定義全局方法:如下

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>    //通過v-if來控制容器的出現與消失
  </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( ); 原理就是通過控制組件容器的出現與消失, 達到重新渲染的效果 , 從而實現我們的目的;

　　第二步:在全局中定義了刷新的方法, 接下來就是要引入到需要刷新的組件中:

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

通過 inject 方法引入到需要的組件中, 直接this.reload() 調用這個方法即可.

那么這樣就成功了,親測有用哦!