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:

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

<style>
  *{
    padding: 0;
    margin: 0;
  }
</style>

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

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