这里要先了解一下provide和inject
provide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值
inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称
下面我们通过依赖注入（provide和inject）实现自定义页面刷新事件
原理：给app.vue中router-view绑定v-if事件，在函数中控制v-if的值在短时间内由true到false再到true,从而使页面达到刷新效果
推荐指数：满天星
app.vue文件:
<template><router-view v-if="state.showRouter"/></template><script>import {reactive, nextTick, provide } from 'vue'export default {setup(){const state = reactive({showRouter: true})//刷新事件function reload(){state.showRouter = false//nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。nextTick( () =>{state.showRouter = true})}// 向子组件以及子孙组件传递名为reload的函数，第一个参数自定义，第二个参数代表上面定义的reload()方法provide('reload',reload)return {state }}}</script>
需要用到刷新事件的子组件：
<template><button @click="refRoad">刷新页面</button></template><script>import {inject } from 'vue'export default {setup(){const reload = inject('reload') //注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数function refRoad(){reload()}return {refRoad }}}</script>
