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

更新时间：2022年11月14日 11:05:24 作者：明天也要努力

provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下

Vue中常见的组件通信方式可分为三类

父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject；
$attrs/$listeners；

兄弟通信

Bus；
Vuex；

跨级通信

Bus；
Vuex；
provide / inject、
$attrs / $listeners、

1. provide / inject 简介

类型

provide：Object | () => Object
inject： Array<string> | { [key: string]: string | Symbol | Object }

详细

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
如果你熟悉 React，这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
在该对象中可使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：
一个字符串数组，或
一个对象，对象的 key 是本地的绑定名，value 是：
在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
一个对象，该对象的：
from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value

2. provide / inject 使用方法

祖组件

<template>
  <div>
    <button @click="changeMsg">祖组件触发</button>
    <h1>祖组件</h1>
    <parent></parent>
  </div>
</template>

<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      developer:'布兰登·艾奇',
      year:1995,
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, // 方式1.传入一个可监听的对象
      developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值
      year: this.year, // 方式3.直接传值
      app: this, // 4. 提供祖先组件的实例 缺点：实例上挂载很多没有必要的东西 比如：props，methods。
    }
  },
  components: {
    parent,
  },
  methods:{
    changeMsg(){
      this.obj.name = 'Vue';
      this.developer = '尤雨溪';
      this.year = 2014;
      this.update = '2021年6月7日';
    },
  },
}
</script>

父组件

<template>
  <div class="wrap">
    <h4>子组件（只做中转）</h4>
    <child></child>
  </div>
</template>

<script>
import child from './child.vue';
export default {
  components:{
    child,
  },
}
</script>

孙组件

<template>
  <div>
    <h5>孙组件</h5>
    <span>名称：{{obj.name}}</span> |
    <span>作者：{{developer}}</span> |
    <span>诞生于：{{year}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
 
<script>
export default {
  computed:{
    developer(){
      return this.developerFn()
    }
  },
  inject:['obj','developerFn','year','app'],
}
</script>

未点击按钮，原有状态

当点击按钮触发 changeMsg 方法后，效果如下：

对比一下前后差异：无论点击多少次，孙组件中的诞生于 year 字段永远都是1995 并不会发生变化，通过方式1、方式2、方式4传值是可以响应的。

正是官网所提到的：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

在孙组件中修改祖组件传递过来的值（方式1、方式4），发现对应的祖组件中的值也发生了变化。

祖组件

<template>
  <div>
    <h1>祖组件</h1>
    <span>名称：{{obj.name}}</span> |
    <span>最后更新于：{{update}}</span>
    <parent></parent>
  </div>
</template>

<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, 
      app: this,
    }
  },
  components: {
    parent,
  },
}
</script>

父组件不变

孙组件

<template>
  <div>
    <button @click="changeMsg">孙组件触发</button>
    <h3>孙组件</h3>
    <span>名称：{{obj.name}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
 
<script>
export default {
  inject:['obj','app'],
  methods: {
    changeMsg(){
      this.obj.name = 'React';
      this.app.update = '2020年10月';
    }
  },
}
</script>

未点击按钮，原有状态

当点击按钮触发 changeMsg 方法后，效果如下：

3. 总结

慎用 provide / inject

既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？
前面提到过，Vuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。
Vue 的设计理念借鉴了 React 中的单向数据流原则（虽然有 sync 这种破坏单向数据流的家伙），而 provide/inject 明显破坏了单向数据流原则。试想，如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。这一方面增加了耦合度，另一方面，使得数据变化不可控。如果在多人协作开发中，这将成为一个噩梦。

在这里，总结了使用 provide/inject 做全局状态管理的原则：

多人协作时，做好作用域隔离；
尽量使用一次性数据作为全局状态

看起来，使用 provide / inject 做全局状态管理好像很危险，那么有没有 provide / inject 更好的使用方式呢？
当然有，那就是使用 provide / inject 编写组件。

使用 provide / inject 编写组件

使用 provide/inject 做组件开发，是 Vue 官方文档中提倡的一种做法。

以我们比较熟悉的 elementUI 来举例：

在 elementUI 中有 Button（按钮）组件，当在 Form（表单）组件中使用时，它的尺寸会同时受到外层的 FormItem 组件以及更外层的 Form 组件中的 size 属性的影响。

如果是常规方案，我们可以通过 props 从 Form 开始，一层层往下传递属性值。看起来只需要传递传递两层即可，还可以接受。但是，Form 的下一层组件不一定是 FormItem，FormItem 的下一层组件不一定是 Button，它们之间还可以嵌套其他组件，也就是说，层级关系不确定。如果使用 props，我们写的组件会出现强耦合的情况。

provide/inject 可以完美的解决这个问题，只需要向后代注入组件本身（上下文），后代组件中可以无视层级任意访问祖先组件中的状态。

部分源码如下：

export default {
  name: 'ElButton',
  // 通过 inject 获取 elForm 以及 elFormItem 这两个组件
  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  // ...
  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    //...
  },
  // ...
};

总结

到此这篇关于Vue中provide、inject详解及使用的文章就介绍到这了,更多相关Vue provide、inject详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中component标签解决项目组件化操作
这篇文章主要介绍了Vue中component标签解决项目组件化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue限制输入数字或者保留两位小数实现
这篇文章主要为大家介绍了vue限制输入数字或者保留两位小数实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
这篇文章主要介绍了详解IOS微信上Vue单页面应用JSSDK签名失败解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
详解vue静态资源打包中的坑与解决方案
本篇文章主要介绍了详解vue静态资源打包中的坑与解决方案，本文主要解决路径问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue响应式原理模拟实现原理探究
这篇文章主要介绍了Vue响应式原理，响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生了改变的时候，就会运行一些函数，最常见的示render函数
2022-09-09
Vue下拉框双向联动效果的示例代码
这篇文章主要介绍了Vue下拉框双向联动效果,实现联动，大家都知道在vue的页面中，想要实现多个<el-select 下拉框的值动态改变，必须要调用@change 函数，具体操作方法跟随小编一起学习下吧
2022-04-04
Vue 检测变化的注意事项
这篇文章主要介绍了Vue 检测变化的注意事项，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-08-08
Vue3中的Refs和Ref详情
这篇文章主要介绍了Vue3中的Refs和Ref，文章围绕Vue3中的Refs和Ref得相关资料应用举例烦人方式展开详细内容,需要的朋友可以参考一下
2021-11-11
Vue三种常用传值示例(父传子、子传父、非父子)
这篇文章主要介绍了Vue传值-三种常用传值示例，主要介绍了父组件向子组件进行传值，子组件向父组件传值和非父子组件进行传值，感兴趣的小伙伴们可以参考一下
2018-07-07
使用element upload上传组件如何去掉删除按钮
这篇文章主要介绍了使用element upload上传组件如何去掉删除按钮
2023-07-07