组件通信-跨级通信Provide | Inject

使用 provide/inject ，只需要向后代注入组件本身（this），后代组件中可以无视层级任意访问祖先组件中的状态。

当然它也有缺点：因为 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态

Vue 的设计理念借鉴了 React 中的单向数据流原则（虽然有 sync 这种破坏单向数据流的家伙），而 provide/inject 明显破坏了单向数据流原则。试想，如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。这一方面增加了耦合度，另一方面，使得数据变化不可控。如果在多人协作开发中，这将成为一个噩梦。
 

下面我们来看看一个小案列：

我的四个组件  App.vue（祖组件） App.vue下面有一个Navbar.vue 和一个Tabbar.vue   而Tabbar.vue组件下有一个TabbarItem.vue的组件
现在要实现的的功能是在TabbarItem.vue组件中改变Navbar.vue组件中的值

App.vue

Navbar.vue

Tabbar.vue

TabbarItem.vue