非父子组件的通信

这里我们主要讲两种方式：

• Provide/Inject
• Mitt全局事件总线；

一、Provide和Inject（子孙级）

Provide/Inject 用于非父子组件之间共享数据：

• 比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；
• 在这种情况下，如果我们仍然将props沿着组件链逐渐传递下去，就会非常的麻烦；

对于这种情况下，我们可以使用Provide和Inject:

• 无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者；
• 父组件有一个provide 选项来提供数据
• 子组件有一个inject 选项来开始使用这些数据

Provide和Inject 的使用

 在真实开发里面provide里面的数据不是写死的，可能来自于服务器,这时候要想拿到data里面的数据，vue建议最好将proviede写成一个函数。

处理响应式数据：

 注意:上一案例中我们的数据一次性，当我们数据发生变化的时候，Provide里面的数据是无任何响应变化的，(computed箭头函数是不绑定this的，也就是说我们现在给length赋值的时候，是赋的computed函数的返回值，因为computed里面的this是对data里面的值是有依赖的，一旦依赖发生改变，computed的值就会重新计算，会有一个新的值，就会给length赋值新的值。）

 使用：

二、全局事件总线mitt库

1.先安装 

npm install mitt -D

2.其次，我们可以封装一个工具eventbus.js:

3.使用

监听事件：在生命周期里监听，也是拿到emitter对象

  Mitt事件取消

//取消emitter中所有的监听
emitter.all.clear()
//定义一个函数
function onFoo(){}
emitter.on('foo',onFoo) //监听
emitter.off('foo',onFoo) //取消监听