跨级通信 Provide & Inject

跨级通信 Provide & Inject

Provide、inject 是一对选项。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深。依赖指的就是数据，可以将一份数据传给后代组件。后代组件通过 inject 可以进行接收。这个其实和 props 是很相似的。接下来进行实践一下。

基础案例

Component1.vue

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

Component2.vue

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

Component3.vue

1
2
3
4
5
6
7
8
9
10
11

调试结果

可以看到 Component1 组件在选项 provide 中定义了 age 属性。其后代组件 Component2、Component3 都可以通过 inject 进行接收。其实这个 API 使用的还是比较少的，一般会有其他更好的方案进行解决。并且也不支持反向传递数据。

原文链接：菜园前端