Vue中组件局部刷新

1.序言

（1）provide与inject

  在实现组件局部刷新之前先来说一说provide与inject方法。

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

  (2)其他的方法实现页面刷新

this.$router.go(0);

location.reload();

  这两种方法都是强制刷新页面，会出现短暂的白屏闪烁，不推荐使用。

2.provide与inject实现VUE中组件局部刷新

首先在app.vue写入provide。

app.vue:

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

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