vue 关于 provide/inject 的 简单使用

Provide / Inject

也是解决vue组件间传值的一种方案，适合于父子/祖孙 组件之间的传值，也是封装通用组件的一种组合式api

Provide/inject 可以理解成依赖注入
一般出现都是成对出现的 Provide 在父组件注入相应的 属性

注意 你的provide的数据改变，inject是不会接受到这个改变，然而如果你provide的内容是一个可响应的数据，比如一个对象引用，那么这个对象的属性是可以检测到变化的。

基本用法

vue3.X中

//父组件
import { provide } from "vue";
 
const drawerToolsVisible = (data) => {
  //data 为子组件传递数据 
};
provide("toolsVisible", drawerToolsVisible);
 

//子组件
import { provide } from "vue";
 
const toolsVisible = inject("toolsVisible");
 
//调用
toolsVisible(false);

也可以定义成对象的形式，因此inject/provide是类似于props这种父子组件传值的，祖孙组件传值，
秉承着数据向下好溯源，小功能数据处理集中在一个地方，小编是通过定义回调函数的形式来实现的！！