使用inject和provide对页面进行刷新

​​持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情​

使用inject和provide对页面进行刷新

使用场景：在vue项目中，父子组件之间的通信是很常见也是我们熟悉的，但祖孙组件是如何通信的呢？-----》通过provide/inject可以轻松实现跨级访问祖先组件的数据

这里的provide和inject可以实现嵌套组件之间进行传递数据。

1. 这两个函数都是在setup语法中使用;
2. 父级组件使用provide向下进行传递数据;
3. 子级组件使用inject来获取上级组件传递过来的数据; 注意：provide只能够向下进行传递数据；在使用provide和inject的时候需从vue中引入。

使用方法：

直接看代码即可：

<script setup lang="ts">
import {provide, ref, nextTick  } from "vue";
const isRouterAlive  = ref(true);
const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true
      })
    }
    provide("reload", reload);
</script>

<template>
  <!-- router组件渲染的地方 -->
  <router-view v-if="isRouterAlive"></router-view>
</template>

首先，需要修改一下app.vue文件，通过reload方法来控制router-view的显示或者隐藏

<template>
  <!-- router组件渲染的地方 -->
  <router-view v-if="isRouterAlive"></router-view>
</template>

const isRouterAlive  = ref(true);
const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true
      })
    }
    provide("reload", reload);

写好之后就可以在子页面中调用即可

使用inject调用provide的方法

// 这里是自组建
// 先引入
import { ref, onMounted, reactive ,inject} from "vue";

const myFn = inject<any>("reload");
// 最后在需要使用的页面中调用这个方法myFn() 
// 比如可以放在点击事件中
const btn =()=>{
    myFn()
}

最后看一下项目实现效果:

这时候就有人问了，为什么不适用location.reload()或者router.go(0)来刷新页面呢？ 这里的缺点也显而易见，这种刷新就类似于ctrl+F5来进行强制刷新，整张页面看起来会出现白屏的现象，用户交互的体验感不好，而这种用provide和inject方法不会出现白屏现象。

不会向F5刷新页面那样刷新数据。所以比较推荐大家使用这种方法。