如何用Vue的provideinject实现组件间长尾词的跨级通信？

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

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

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

例如：javascriptprovide: { someProperty: 'value'}或javascriptprovide() { return { someMethod() { // ... } }}

`inject` 可以这样使用：javascriptinject: ['someProperty', 'someMethod']

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

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

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

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

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