vue的局部刷新

• vue局部刷新是对数据修改了或者删除了等操作，数据应该显示咱们操作后的状态的，但是重新请求axios是非常消耗内存的，此时应该是组件的局部刷新，那么如何实现vue组件的局部刷新呢？以下讲述了方法，希望可以帮助到大家。

一、在 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() 方法; 原理就是通过控制组件容器的出现与消失,达到重新渲染的效果,从而实现我们的目的。

二、在全局中定义了刷新的方法, 接下来就是要引入到需要刷新的组件中。

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

通过 inject 方法引入到需要的组件中, 直接this.reload() 调用这个方法即可。