使用inject和provide对页面进行刷新
这里的provide和inject可以实现嵌套组件之间进行传递数据。
这两个函数都是在setup语法中使用;
父级组件使用provide向下进行传递数据;
子级组件使用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刷新页面那样刷新数据。所以比较推荐大家使用这种方法。
