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

场景：修改当前页面的某个属性点击保存之后，发现页面并没有同步更新

 

使用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>

子页面：

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

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