使用
provide和inject主要用于開發(fā)高階插件和組件時(shí)使用。并不推薦應(yīng)用于程序代碼中
父組件提供foo 子組件注入
var Provider = {
provide:{
foo:'bar'
},
//....
}
//子
var Child = {
inject:['foo'],
created(){
console.log(this.foo);
}
}
缺點(diǎn)
數(shù)據(jù)來(lái)源不明確
重名問(wèn)題
源碼：
1入口位置：src/core/instance/init.js 50行左右
initInjections(vm)//子組件將數(shù)據(jù)注入到自己身上
initProvide(vm);//父組件在初始化的時(shí)候提供好數(shù)據(jù)
2：provide源碼
- 位置：src/core/inject.js:第8行
- 說(shuō)明：其實(shí)就是在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屬性 進(jìn)行解析
const result = resolveInject(vm.$options.inject,vm)
}
3.inject
- 不停的去從實(shí)例上查找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
}
}
總結(jié)
在全局vm上添加一個(gè)屬性provide存我們定義的變量忽孽，inject一層層向上查找目標(biāo)屬性姐刁，找到為止余掖！
