vue provide inject好处和缺点,vue provider inject
本文主要介绍了vue的提供和注入的使用方法和原理。本文通过源代码非常详细地向您介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
先说说为什么要用provide/inject。对于爷爷和孙子组件之间，甚至是爷爷和孙子组件之间的通信，我们用vuex是可以的。
那是真的，但是，请听我说。但是，有时候你的项目很小，甚至组件通信的场景也很少。所以，你只是为了那几个交流参考而引入vuex，是不是一种浪费？有人可能还会想到用$parent来获取父组件实例来获取数据/方法。这种两层还好，但是多层呢？如果组件嵌套很深，如何实现呢？再写一个函数封装$parent。那不是很麻烦吗？你不必为了拯救国家而弯曲曲线。哈哈~那太远了。
不废话那么多了，就告诉你用provide/inject就是解决你这些问题，准没错。让我们看看如何使用呢？反手就是几行简单的代码：
1.父组件提供要传递给子组件的参数。
提供(){
返回{
列表类型：this.listType，
}
}
2.子组件的使用：
注入：[listType]，
当然，您也可以在inject中指定您的缺省值和参数的来源：
注入：{
列表类型：{
from定义的名称： par//provide
默认值：1
}
}
好吧！不是很简单吗？事实上，无论组件级别有多深，父组件和祖先组件都可以向后代组件注入依赖关系。
多说一些：
provide可以是一个对象，也可以是一个返回对象的函数。
inejct:可以是字符串数组或者一个对象。
如果你有兴趣，可以看看下面的源代码部分，它相当容易理解：
provide的核心源码：
导出函数provideT(key:injection keyt string number，value: T) {
如果(！currentInstance) {
if (__DEV__) {
warn(`provide()只能在setup()内部使用。`)
}
}否则{
//获取当前组件的提供程序。默认实例继承父类的Providers对象。
let provides=current instance . provides
//使用父提供对象作为原型来创建自己的提供对象
const parentProvides=
currentInstance.parent当前实例. parent .提供
if (parentProvides===provides) {
provides=current instance . provides=object . create(parent provides)
}
提供[字符串形式的键]=值
}
}
inject的核心源码：
导出函数注入(
key: InjectionKeyany string，
默认值？未知，
treatDefaultAsFactory=false
) {
//获取当前组件实例
const instance=current instance currentRenderingInstance
if(实例){
//Get提供
常量提供=
instance.parent==null
？instance . vnode . app context instance . vnode . app context . provides
:instance.parent.provides
if(在provides中提供(key as string symbol){
//如果键存在，直接返回
return提供[字符串形式的键]
} else if (arguments.length 1) {
//如果键不存在，设置了默认值就直接返回默认值。
返回treatDefaultAsFactory is function(default value)
？defaultValue.call(实例.代理)
:默认值
} else if (__DEV__) {
//如果没有，则提示
warn(`injection ${String(key)} 未找到。`)
}
} else if (__DEV__) {
warn(`inject()只能在安装程序()或功能组件中使用。`)
}
}
关于分析使用vue的provide和inject的方法和原理的文章到此为止。有关vue provide和inject使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。