| 首先来谈谈我们为什么要使用provide/inject呢？对于爷爷和孙子组件之间，甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。 那事实的确如此，但是，请听我说但是，有时候你项目比较小甚至组件通信的场景很少的，那么你引入vuex就为了那么几个通信传参是不是很浪费啊。有人也可能会想到使用$parent获取父组件实例，来获取data/methods，这种两层就还好，那多层呢，组件嵌套很深的话，你怎么弄？写个函数把$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.`) }}到此这篇关于解析vue的provide和inject使用方法及其原理的文章就介绍到这了,更多相关vue provide和inject使用内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript中Webpack的使用教程
前端JavaScript大管家 package.json |
