vue中provide和inject怎样用，原理如何理解-群英

上一篇：JS获取指针的位置方法是什么，有哪些事项要注意下一篇：vue如何制作一个简易时间轴播放组件，代码是什么

这篇文章给大家介绍了“vue中provide和inject怎样用，原理如何理解”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

首先来谈谈我们为什么要使用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怎样用，原理如何理解”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！