Vue关于局部刷新

在Vue中，我们经常遇到对数据进行增删改查的操作之后, 希望页面显示的是我们操作之后最新的数据, 为了避免重新做axios请求, 此时用到组件的刷新是很方便的了, 以下便是我做项目中总结的组件局部刷新的方法:

 第一步 : 在 app.vue 中定义全局方法:如下

<template>

  <div id="app" >

    <router-view v-if="isReload"></router-view>

  </div>

</template>

<script>

export default {

  name: 'App',

  provide () {

        return {

          reload: this.reload

        }

      },

      data () {

        return {

          isReload: true

        }

      },

      methods: {

        reload () {

          this.isReload = false

          this.$nextTick(() => {

            this.isReload = true

          })

        }

    }

}

</script>

<style>

body{

  margin:0;

  padding:0;

}

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

</style>

我们定义了全局的方法 reload( ); 原理就是通过控制组件容器的出现与消失, 达到重新渲染的效果 , 从而实现我们的目的;

第二步:在全局中定义了刷新的方法, 接下来就是要引入到需要刷新的组件中:

<script>

export default {

  inject:["reload"],

  name: "hello",

  data() {

    return {

    }

  },

  mounted() {

//刷新调用此方法

    this.reload();

  }

};

</script>