如何实现vue组件的局部刷新？

正如标题，如何实现 vue 组件的局部刷新？这也是最近在做项目的时候遇到这样一个问题，因为我是在父组件调用子组件，展示子组件是通过v-show定义的 mode 类型来实现的，所以在新增或编辑数据的时候都会对数据进行更新，所以在保存后需要对页面组件进行局部刷新，这个方法相信很多用过 vue 的老鸟也都用过，我也好久不用了，感觉有点生疏，所谓“好记性不如烂笔头”，所以特此整理一下，当做自己重新复习一遍，也为其他新的小伙伴提供参考。

我在项目中使用的是provide与inject实现 VUE 中组件局部刷新，在使用前我们先说一说provide与inject方法。

provide是放在最上层的页面，可以实现传数据给它的子组件和多重孙组件，只需要在子孙组件中用inject接收就可以了。

那么，具体怎么使用呢？

首先在 app.vue 写入provide。

app.vue 页面:

<template>
  <router-view v-if="isRouterAlive" />
</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>

然后，在你需要刷新的组件中用inject接收 reload 方法，然后调用，即可实现刷新。

export default {
  inject:["reload"],
  data() {
    return {},
  },
  methods:{
    updateData(){
        this.reload();
    },
  }
}