解析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使用方法及其原理的文章就介绍到这了,更多相关vue provide和inject使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中的provide/inject的学习使用

    vue中的provide/inject的学习使用

    前言 最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据. 下面我们来验证下猜想: first:定义一个parent component <template

  • Vue 2.0 中依赖注入 provide/inject组合实战

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和inject需要配合使用,它们的含义如下: provide        ;一个对象或返回一个对象的函数,该对象包含可注入起子孙的属

  • vue 解决provide和inject响应的问题

    官网上说provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. provide: Object | () => Object(一个对象或返回一个对象的函数) inject: Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名) 要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数

  • Vue.js中provide/inject实现响应式数据更新的方法示例

    vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{

  • vue中使用[provide/inject]实现页面reload的方法

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject]实现刷新 该方法t简单的来说就是在父组件中 1.设置provider 2.然后在子组件中通过inject调用 3.在需要执行的地方直接调用方法即可 总结 以上所述是小编给大家介绍的vue中使用[provide/inject]实现页面reload的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 解析vue的provide和inject使用方法及其原理

    首先来谈谈我们为什么要使用provide/inject呢?对于爷爷和孙子组件之间,甚至太爷爷组件与孙子组件通信我们用vuex不就ok了. 那事实的确如此,但是,请听我说但是,有时候你项目比较小甚至组件通信的场景很少的,那么你引入vuex就为了那么几个通信传参是不是很浪费啊.有人也可能会想到使用$parent获取父组件实例,来获取data/methods,这种两层就还好,那多层呢,组件嵌套很深的话,你怎么弄?写个函数把$parent再封装一下.那不是很麻烦吗,现成的你不用非要曲线救国.哈哈-扯远了

  • Vue 中 provide和inject的使用

    Vue 中 provide和inject的使用

    目录 前言 Vue中如何使用provide和inject 在 Vue 中使用注入访问父数据 前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主要方式之一.例如,下面的代码,我们往子组件(PopularList )传递了属性 name,其值是Most Popular Posts.在PopularList中我们可以通过name访问数据. <PopularList name="Most Popular Posts" /> 但是有时子

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue Router history模式的配置方法及其原理

    vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

  • vue2.0/3.0中provide和inject的用法示例

    vue2.0/3.0中provide和inject的用法示例

    目录 1.provide/inject有什么用? 2.provide/inject使用方式 具体用法: vue3.0用法 总结 1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护. vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题.在provide中指定要传递给子孙组件的数据,子孙组件通过inject注

  • 详解Vue 多级组件透传新方法provide/inject

    provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容). provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. Vue 官方警告: provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中. 当然,警告只是警告,你完全可以正常使用. 使用方法非常像 data 和 props 的组合大礼包: var Provider = {

  • 应用provide与inject刷新Vue页面方法

    目录 方法1:直接调用函数 方法2:采用provide / inject(静刷新) 优势比较 方法1:直接调用函数 将整个页面重载, 以下两种都可以 1.window.location.reload() 2.this.$router.go() 方法2:采用provide / inject(静刷新) 在高阶函数中声明一个reload刷新函数 <template> <div id="app" v-if="show"></div> &l

  • vue父组件给子组件的组件传值provide inject的方法

    一般情况下我们父子之间的传值用的是props,这个就不多说了,但是如果想让父给子组件的组件传值怎么办呢,这里我们就可以用到 provide 和 inject(依赖注入) provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值 具体的可以看官网介绍provide/inject:https://cn.vuejs.org/v2/api/#provide-inject 下面我们可以写个简单的例子来演示一下

  • 聊聊Vue中provide/inject的应用详解

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj

随机推荐