Vue-依赖注入（provide-inject）

---

provide-inject的作用

通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项

这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

也就是说，在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法。有人这么形容：

provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props

如何使用

使用方法
provide 提供变量：Object | () => Object
inject 注入变量： Array | { [key: string]: string | Symbol | Object }
provide 选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。

inject 选项可以是:
inject用来指定一个数组或者一个对象，数组的话就放provide里字段的名称，而对象的话可以指定
当前实例中的字段名
对应provide里的字段名
默认值或者返回默认值的函数

const Child = {
  inject: {
    foo: {
      from: 'msg',
      default: () => [1, 2, 3]
    }
  }
}
1
2
3
4
5
6
7
8

注意：provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么气对象的属性还是可监听的。

案例：

//App.vue中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//bo1文件中


1
2
3
4
5
6
7
8
9
10
11
12
13
14

//bo2文件中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

provide-inject如何实现响应式

方法一、父级组件为子级组件提供的数据为对象

//App.vue中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//bo1文件中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//bo2文件中


1
2
3
4
5
6
7
8
9
10
11

页面呈现：

当我们点击时：

可以看见所有组件都改变了

方法二、传递一个参数用方法返回

//App.vue中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//box1文件中


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//bo2文件中


1
2
3
4
5
6
7
8
9
10
11

页面呈现：

当我们点击修改时：