【VUE无闪烁无白屏刷新页面】provide和inject

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

  • 在 App.vue 文件里写入provide的方法
 1 <template>
 2   <div id="app">
 3     <router-view v-if="isActive" />
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'App',
10   data () {
11     return {
12       isActive: true
13     }
14   },
15   provide () {
16     return {
17       reload: () => {
18         return new Promise((resolve, reject) => {
19           this.isActive = false;
20           this.$nextTick(() => {
21             this.isActive = true;
22           })
23           resolve()
24         })
25       }
26     }
27   }
28 }
29 </script>

provide的另一种方法：

 1   provide () {
 2     return {
 3       reload: this.reload
 4     }
 5   },
 6   methods: {
 7     reload () {
 8       this.isActive = false;
 9       this.$nextTick(() => {
10         this.isActive = true;
11       })
12     }
13   }
  • 在需要刷新的子孙组件中用inject注入 App.vue 中provide声明的变量
1     data () {
2       return {}
3     },
4     inject: ['reload'],
5     computed: {
6       ...mapGetters([
7         'getComFlag'
8       ])
9     },
  • 使用：
<el-button @click="reloadFun">刷新按钮</el-button>
1     methods: {
2       reloadFun () {
3         this.reload(); // 直接使用
4       },

 或者

      reloadFun () {
        this.reload().then(res => {
          debugger 
        }); // 直接使用
      },

 

posted @ 2020-10-10 11:04  行屰  阅读(307)  评论(0)  编辑  收藏  举报