vue3中provide 和 inject 用法#Vue3中解决局部刷新问题

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。

像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。
在这里插入图片描述

使用之前，必须从 vue 显示导入 provide/inject 方法。

provide 函数接收两个参数：

provide( name,value )

父组件index.vue（provide提供数据）：

<!-- 子组件 -->
<app-main v-if="isNavbar" />
<!--  刷新成功弹窗提示 -->
<div><el-dialogv-model="dialogVisible"width="170":show-close=false:modal=falsestyle="padding: 0;border: 1px solid #e6e6e6;border-radius: 5px"><div style="display: flex; margin-left:10px;margin-top: -10px;"><el-icon :size="40" color="green"><CircleCheck /></el-icon><span style="margin-left: 5px;margin-top: -2px; font-size: 15px;">刷新成功</span></div></el-dialog></div>
import { nextTick,provide } from 'vue'const isNavbar = ref(true)
const reload = ()=>{isNavbar.value = falsedialogVisible.value=truenextTick(()=>{isNavbar.value = true})setTimeout(() => {dialogVisible.value = false}, 1000);
}
// 父组件使用 provide 提供数据
provide("reload",reload)

inject 函数有两个参数：

inject(name,default)

name：接收 provide 提供的属性名。

子组件Navvar.vue（inject接收数据）：

<el-icon :size="20" @click="getRefresh"><Refresh /></el-icon>import {inject} from 'vue'// 接收父组件 provide 提供的 reload 数据
const getRefresh = inject("reload") as any