1. 场景：在增加，修改或者删除一条记录的后希望当前页面可以重新刷新

2. 使用 provide，inject，nextTick 实现

2.1 App.vue 生产者提供者provide，提供刷新方法

<template>
  <div class="sofa-admin-app">
    <router-view v-if='isRouterAlive'/>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, provide, nextTick } from 'vue'
export default defineComponent({
  name: 'App',
  setup () {
    const data = reactive({
      isRouterAlive: true
    })
    const reload = () => {
      data.isRouterAlive = false
      nextTick(() => {
        data.isRouterAlive = true
      })
    }
    provide('reload', reload)
    return {
      ...toRefs(data),
      reload
    }
  }
})
</script>

2.2 子组件消费者使用者注入依赖，直接调用

import { defineComponent, reactive, toRefs, onMounted, inject } from 'vue'
export default defineComponent({
	setup () {
		const reload = inject('reload')
	}
	const deleteBusArea = () => {
      ElMessageBox({
        title: '提示',
        message: `${busArea.deleName}有${busArea.deleSonNumber}个下属区域，删除后其下区域将一并删除<br/>${busArea.deleName}或其下属区域下存在督导/拓展，删除此区域后，督导/拓展对应的区域请及时维护`,
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        api.businessArea.deleteCodeUp({ code: busArea.deleCode }).then(res => {
          reload()
        })
      }).catch(() => {
        busArea.busAreaType = 0
      })
    }
	return {
		reload,
		deleteBusArea 
	}
})

2.3 vue3.x nextTick的用法区别于vue2.x，vue3.x 引入依赖后直接使用

import { reactive, toRefs, nextTick } from 'vue'
setup () {
  const data = reactive({
    isRouterAlive: true
  })
  const reload = () => {
    data.isRouterAlive = false
    nextTick(() => {
      data.isRouterAlive = true
    })
  }
  return {
    ...toRefs(data),
    reload
  }
}

刷新页面的其他方法