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() 调用这个方法即可.

那么这样就成功了,亲测有用哦!