如何实现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抓紧创作!

微信微信 支付宝支付宝

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

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何实现vue组件的局部刷新?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们