iview 表格随着更改刷新

使用location.reload()

或者是

路由的 this.$router.go(0)

进行刷新的时候,是会出现一阵的空白区域的,因为是整个页面的刷新

,所以比较缓慢,因此使用了provide/inject的方法。

 

在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
    }
  },
  //声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive=true
      })
    }
  }
};
</script>

<style>
.size{
  width:100%;
  heigth:100%;
} html,body{
.size; margin:
0; padding: 0; } #app { .size;
}
</style>

 

子页面引用

<script>
export default {
   inject:['reload'] ,
   methods:{
       reload(){
        this.reload()
       }
   }
}
</script>

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

posted @ 2019-10-08 17:54 ___mouM 阅读(...) 评论(...) 编辑 收藏