使用
provide和inject主要用于开发高阶插件和组件时使用。并不推荐应用于程序代码中
父组件提供foo 子组件注入
var Provider = {
provide:{
foo:'bar'
},
//....
}
//子
var Child = {
inject:['foo'],
created(){
console.log(this.foo);
}
}
缺点
数据来源不明确
重名问题
源码：
1入口位置：src/core/instance/init.js 50行左右
initInjections(vm)//子组件将数据注入到自己身上
initProvide(vm);//父组件在初始化的时候提供好数据
2：provide源码
- 位置：src/core/inject.js:第8行
- 说明：其实就是在vm上增加_provide vm._provide.foo = 'bar'
export function initProvide(vm:component){
const provide = vm.$options.provide
if(provide){
vm._provide = typeof provide === 'function' ?provide.call(vm):provide
}
}
export default initInjection(vm:Component){
//拿到inject属性 进行解析
const result = resolveInject(vm.$options.inject,vm)
}
3.inject
- 不停的去从实例上查找source._provided属性，一层层向上查找，找到为止
export function resolveInject (inject: any, vm: Component): ?Object {
if (inject) {
// inject is :any because flow is not smart enough to figure out cached
const result = Object.create(null)
const keys = hasSymbol
? Reflect.ownKeys(inject)
: Object.keys(inject)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
// #6574 in case the inject object is observed...
if (key === '__ob__') continue
const provideKey = inject[key].from
let source = vm
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) {
result[key] = source._provided[provideKey]
break
}
source = source.$parent
}
if (!source) {
if ('default' in inject[key]) {
const provideDefault = inject[key].default
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault
} else if (process.env.NODE_ENV !== 'production') {
warn(`Injection "${key}" not found`, vm)
}
}
}
return result
}
}
总结
在全局vm上添加一个属性provide存我们定义的变量，inject一层层向上查找目标属性，找到为止！
