首先来谈谈我们为什么要使用provide/inject呢?对于爷爷和孙子组件之间,甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。
那事实的确如此,但是,请听我说但是,有时候你项目比较小甚至组件通信的场景很少的,那么你引入vuex就为了那么几个通信传参是不是很浪费啊。有人也可能会想到使用parent再封装一下。那不是很麻烦吗,现成的你不用非要曲线救国。哈哈~扯远了。
不废话那么多了,就告诉你用provide/inject就是解决你这些问题,准没错。让我们看看如何使用呢?反手就是几行简单的代码:
1.父组件提供向子组件要传递的参数
provide() {
return {
listType: this.listType,
}
}
2.子组件使用:
inject: ['listType'],
当然,你也可以在inject中指定你的默认值和你参数的来源:
inject:{
listType:{
from:"par"//provide定义的名字
default:1
}
}
好啦!是不是很简单呢。其实就是不管是父组件还是祖先组件都可以向后代组件中注入依赖,无论组件的层次有多深。
再说一些:
provide可以是一个对象,也可以是一个返回对象的函数。
inejct:可以是字符串数组或者一个对象。
有兴趣的话再看看下面的源码部分,也是相当容易了解的:
provide的核心源码:
export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
if (!currentInstance) {
if (__DEV__) {
warn(`provide() can only be used inside setup().`)
}
} else {
//获取当前组件的provides,默认实例继承父类的provides对象
let provides = currentInstance.provides
//使用父provide对象作为原型来创建自己的provide对象
const parentProvides =
currentInstance.parent && currentInstance.parent.provides
if (parentProvides === provides) {
provides = currentInstance.provides = Object.create(parentProvides)
}
provides[key as string] = value
}
}
inject的核心源码:
export function inject(
key: InjectionKey<any> | string,
defaultValue?: unknown,
treatDefaultAsFactory = false
) {
//获取当前组件实例
const instance = currentInstance || currentRenderingInstance
if (instance) {
//获取provides
const provides =
instance.parent == null
? instance.vnode.appContext && instance.vnode.appContext.provides
: instance.parent.provides
if (provides && (key as string | symbol) in provides) {
//如果key存在就直接返回
return provides[key as string]
} else if (arguments.length > 1) {
//如果key不存在,设置了默认值就直接返回默认值
return treatDefaultAsFactory && isFunction(defaultValue)
? defaultValue.call(instance.proxy)
: defaultValue
} else if (__DEV__) {
//如果都没有就提示
warn(`injection "${String(key)}" not found.`)
}
} else if (__DEV__) {
warn(`inject() can only be used inside setup() or functional components.`)
}
}
好啦!大概就这些啦!有问题评论下方:我看到会及时回复哦!