vue中provide/inject的使用

vue中provide/inject的使用

最近遇到一个新的知识点,初次阅读代码感觉很懵逼,后来经过查资料发现还是挺实用的,故把它记录下来.(文章部分引用)我觉得此篇文章写的比较详细易懂,其中有作者自己的理解.

为何使用provide/inject

众所周知，在组件式开发中，最大的痛点就在于组件之间的通信。在 Vue 中，Vue 提供了各种各样的组件通信方式，从基础的 props/$emit 到用于兄弟组件通信的 EventBus，再到用于全局数据管理的 Vuex。

在这么多的组件通信方式中，provide/inject 显得十分阿卡林（毫无存在感）。但是，其实 provide/inject 也有它们的用武之地。今天，我们就来聊聊 Vue 中 provide/inject 的应用。

provide/inject 是 Vue 在 2.2.0 版本新增的 API，官网介绍如下：

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

官网的解释很让人疑惑，那我翻译下这几句话：

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法
举个官网的：

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

可以看到，父组件提供的 foo 变量被子组件成功接收并使用。

慎用 provide/inject

既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？
个人理解和引用文章的作者有不同的理解!
如果需要全局响应的变量,还是使用vuex进行管理,provide/inject虽然可以实现跨组件实现共享数据和方法.
但是如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么要有一个后代组件修改了该状态，其状态的修改不会响应到别的后代组件.
这当然需要自己在实践中验证了,等闲暇后再来验证自己的理解

使用场景分析

自己项目使用的Ant Design,结合页签组件a-tabs,在总布局组建中设置关闭标签的方法.
TabLayout.vue

provide(){
      return{
        closeCurrent:this.closeCurrent
      }
    },

在各自的后台组件中使用inject,可以调用关闭页签方法

export default {
  name: 'tinymce',
  inject:['closeCurrent'],
  data() {
  ...
  }
}

详细代码就不粘贴了,你们懂的,不过我在网上找了个详细例子!

一种最常见的用法是刷新vue组件
app.vue

这样就实现了子组件调取reload方法就实现了刷新vue组件的功能.

总结

在跨组件数据传递的时候,如果不需要vuex全局响应的话,感觉使用provide/inject还是方便的