我们实际编写项目时往往离不开组件之间的相互通信，但是这之间如何通信呢？一般大家可能首先想到props，或者是vuex，今天老将军换个新把式，咱说下另外两个
- provide和inject
-
mitt
ok，先说第一个，provide和inject。
它用于父组件向子孙组件传递数据，provide在父组件中提供要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中使用数据。
可能会有小伙伴有疑问那我props也是一样的啊，那试想一下我们有一个大型组件树，并且一个深度嵌套的组件需要来自远距离祖先组件的数据。如果使用 props，我们就需要在整个父链中传递相同的 props，那不忒麻烦了，自己都写不耐烦了而且容易出错。在此简单举例：
props1.png
改为Provide / Inject方式后
props2.png
具体代码
//APP.vue
......
provide() {
return {
name: "leah",
age: 883,
};
},
//HomeContent.vue
<script>
export default {
inject:["name","age"]
}
</script>
provide可以使用对象形式，但是如果我们需要提供每个实例的状态，例如通过 声明的数据data()，那么provide必须使用函数值。此外，如果为了使provide链接到data中的数据，我们需要使用computed()函数提供一个计算属性
provide() {
return {
message: computed(() => this.xxx)
}
}
大家都知道props是有默认值的，在没有值传递过来时默认数值是多少，那inject有没有呢，答案是有的，如果我们provide没有传递值时HomeContent.vue可以改为
export default {
inject: {
name: {
default: "leah",
},
age: {
default: "12",
},
},
};
如果想使用别名，下面是将name改为testName，如果再使用，那就不是用this.name，而是this.testName
inject: {
testName: {
from: "name",
default: "12313",
},
},
接下来再说一下mitt，vue2.x有EventBus，3把它去掉了。我们可以使用mitt创建一个3的事件车。mitt是一个体积极小的第三方消息发布/订阅式JavaScript库，与框架无关，所以不论是React还是Vue都可以用，示例：
//导入
import mitt from "mitt"
const emitter=mitt()
export default emitter
//用法
import emitter from "xxx";
//触发调用
emitter.emit("clickMe", { xx:xxx });
//监听某一emitter
emitter.on('clickMe', clickMe) // listen
//监听所有emitter
emitter.on('*', (type, e) => console.log(type, e) ) //type为方法名，e为传递的数据
//取消所有emitter监听
emitter.all.clear()
//创建及移除
function clickMe {}
emitter.on('clickMe', clickMe) // listen
emitter.off('clickMe', clickMe)
铛铛铛～撒花完结🎉，如有不对，欢迎指正
