如何实现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();
    },
  }
}

以上关于如何实现vue组件的局部刷新？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。