provide和inject主要用于开发高阶插件和组件时使用。
🌰 举个例子:
1 | // 父组件提供foo 子组件注入 |
优点:
- 祖先组件不需要知道哪些后代组件使用它提供的属性;
- 后代组件不需要知道被注入的属性来自哪里;
缺点: - 数据来源不明确
- 重名问题
源码分析:
组件实例初始化的时候会调用Vue.prototype._init
,vm._init
中在data/props
前面调用了initInjections
,在data/props
后面调用了initProvide
。
initInjections
该方法主要做了以下两件事:
- 获取vm.$options.inject,通过resolveInject方法找到对应的key集合;
- 遍历key集合,对其进行响应式监听;
➡️ resolveInject
该方法实现了通过$parent向上查找祖先节点数据:是通过遍历source.$parent逐级向上查找的,知道找到为止。
initProvide
该方法单纯把组件注册的provide值,赋值给vm._provided,resolveInject中有使用到