【vue】使用provide，inject来刷新页面

最新推荐文章于 2024-07-19 15:31:02 发布

原创最新推荐文章于 2024-07-19 15:31:02 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #provide #inject #provide和inject #跨组件

vue工作专栏收录该内容

26 篇文章

订阅专栏

本文探讨如何通过调整提供和注入机制，解决页面刷新导致的空白期问题，提供流畅的用户体验，同时优化数据重载方法。

问题：使用其他方式刷新当前页面有时会出现一段时间的空白，用户体验不好(利用这些方式来重新加载数据也不好)

provide代码：

//被控制页面
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default  {
  name:  'App',
  provide(){
    return {
      //方法定义在provide中传给inject
      reload: this.reload
    }
  },
  data(){
    return {
      isRouterAlive: true
    }
  },
  methods:{
    //定义刷新方法
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    }
  }
}
</script>

inject代码：

//控制页面
<template>
  <!--此处控制刷新-->
  <div @click="handleClick"></div>
</template>

<script>
export default {
  inject:['reload'],
  methods:{
    handleClick(){
      // 重新加载当前页面
      this.reload();
    }
  }
};
</script>

provide和inject可以跨组件传递变量和方法