vjsfwww9999

npm
i
circular - dependency - plugin - D   // webpack的循环引用问题检查插件

provide
api
用于父级组件向下游组件统一传递需要用的对象


父组件里
const context = {
    SchemaItem,
};
provide("vjsf", context);

孙子组件里拿到
const context = inject("vjsf");


传递的特性

A组件 里用了B组件 和  C组件
B组件里用了D组件

那么A组件提供的对象  B C D都可以拿到
如果B C D没有自己提供对象 那么B C D 拿到的就是A组件里给的对象
如果B组件里提供了对象 那么B组件就会基于A组件的对象搞一个新的对象然后把属性放进去  B组件提供的对象只有D可以拿到 也就是只有自己的孙子组件可见

    // 在 setup函数中可以使用 watchEffect  函数中用到的响应式对象 就是watchEffect函数依赖的对象  这些对象发生改变就会导致watchEffect重新被执行
watchEffect(() => {
    console.log(context.tag);
});

//setup函数返回的那个 rander函数 也是一样的   里面依赖的响应式对象有改变 就会导致重新执行  进而触发刷新
//provide 也可以结合 响应式对象来用的  provide下去的对象也就是响应式的

利用抛错来限定类型
export function useVJSFContext() {
  const context: { SchemaItem: CommonFieldType } | undefined =
    inject(SchemaFormContextKey);

  if (!context) {
    //通过抛错 可以让ts编译器知道 这个函数必然只有context这一种返回值 所以只要写了这个抛错 ts就会自动认定这个函数的返回值类型是{ SchemaItem: CommonFieldType }
    throw Error("SchemaForm needed");
  }

  return context;
}