VUE3中实现点击按钮刷新页面

这里要先了解一下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>