provide和inject
# 概述
provide
和inject
是Vue3
中新增的两个 API,用于实现组件间的通信,这种特性可以使得父组件向其所有子组件提供依赖项,而不需要通过props
属性一层层传递。
如果provide
提供的值是响应式的,如reactive
或者ref
创建的,那么injecct
注入对应的 key,获取的值也将是响应式的,反之亦然。
# 源码分析
# provide
provide
可以提供任何类型的数据,包括基本类型、对象、函数、响应式对象等。
function provide(key, value) {
if (!currentInstance);
else {
let provides = currentInstance.provides;
const parentProvides =
currentInstance.parent && currentInstance.parent.provides;
if (parentProvides === provides) {
provides = currentInstance.provides = Object.create(parentProvides); //保证父子组件的provides是独立的
}
provides[key] = value;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# inject
inject
可以注入提供的任何类型的值,并且能够响应式地追踪注入的响应式对象或 ref。
function inject(key, defaultValue, treatDefaultAsFactory = false) {
const instance = currentInstance || currentRenderingInstance;
if (instance || currentApp) {
const provides = instance
? instance.parent == null
? instance.vnode.appContext && instance.vnode.appContext.provides
: instance.parent.provides
: currentApp._context.provides;
if (provides && key in provides) {
return provides[key];
} else if (arguments.length > 1) {
return treatDefaultAsFactory && shared.isFunction(defaultValue)
? defaultValue.call(instance && instance.proxy)
: defaultValue;
} else;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
编辑 (opens new window)
上次更新: 2024/07/11, 09:44:06