Vue中如何使用provide和inject实现跨组件通信？

本文共计1806个文字，预计阅读时间需要8分钟。

`provide` 和 `inject` 是 Vue.js 2.2.0 版本后新增的 API：

- `provide`：接受一个对象或一个返回对象的函数，该对象包含可以被注入的属性。- `inject`：接受一个数组、字符串或对象，用于指定需要注入的属性。

例如：javascriptprovide: { someProperty: this.someMethod()},inject: ['someProperty']

provide/inject是Vue.js2.2.0版本后新增的API：

provide：Object | () => Object//一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：Array<string> | { [key: string]: string | Symbol | Object }//一个字符串数组，或一个对象

虽然官方文档说，provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中，但是在插件 / 组件库（比如 iView，事实上 iView 的很多组件都在用）。不过建议归建议，如果你用好了，这个 API 会非常有用。

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

注意：provide和inject绑定并不是可响应的。这显然不是设计的失误，而是刻意的。