vue3-provide与inject的使用-无感刷新组件

介绍

当我们需要跨组件通信的时候， 使用provide inject尚可 我们来看官方的两张图

• 方法一-通过props传递
• 方法二 - provide inject

使用背景

举个栗子🌰，比如我们项目有个中英文切换，中英文切换在顶部， 每个页面切换的时候后端数据也要跟着重新切换，所以所有接口都需要重新请求。

• 思路
• 1、让最完成router-view 重新渲染， 就能重新触发请求(v-if实现)
• 2、通过provide inject 响应切换事件

无感刷新代码

1、app.vue

import { defineComponent, nextTick, ref, provide } from 'vue'

const routerVisible = ref(true)

const refreshPage = () => {
      console.log('刷新页面')
      routerVisible.value = false
      nextTick(()=>{
        routerVisible.value = true
      })
}
// 注入事件
provide('refreshPage', refreshPage)
// 这里是jsx 模板语法也一样
return () => 
    <div>
        {routerVisible.value && <RouterView/>}
    </div>

2、中英文切换组件

import {defineComponent, ref, toRefs, inject} from 'vue'


const refreshPage:any = inject('refreshPage')
// 切换事件
const switchLanguage = () => {
  refreshPage()
}

3、 tip

同级组件无用