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

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

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

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();
    },
  }
}

 

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何实现vue组件的局部刷新?

发表回复