我們實(shí)際編寫項(xiàng)目時(shí)往往離不開組件之間的相互通信唯灵，但是這之間如何通信呢亥曹？一般大家可能首先想到props嘉抓，或者是vuex禽拔，今天老將軍換個(gè)新把式刘离，咱說下另外兩個(gè)
- provide和inject
-
mitt
ok室叉，先說第一個(gè)，provide和inject硫惕。
它用于父組件向子孫組件傳遞數(shù)據(jù)茧痕，provide在父組件中提供要傳給下級的數(shù)據(jù)，inject在需要使用這個(gè)數(shù)據(jù)的子輩組件或者孫輩等下級組件中使用數(shù)據(jù)恼除。
可能會有小伙伴有疑問那我props也是一樣的啊踪旷，那試想一下我們有一個(gè)大型組件樹，并且一個(gè)深度嵌套的組件需要來自遠(yuǎn)距離祖先組件的數(shù)據(jù)缚柳。如果使用 props埃脏，我們就需要在整個(gè)父鏈中傳遞相同的 props，那不忒麻煩了秋忙，自己都寫不耐煩了而且容易出錯(cuò)彩掐。在此簡單舉例：
props1.png
改為Provide / Inject方式后
props2.png
具體代碼
//APP.vue
......
provide() {
return {
name: "leah",
age: 883,
};
},
//HomeContent.vue
<script>
export default {
inject:["name","age"]
}
</script>
provide可以使用對象形式，但是如果我們需要提供每個(gè)實(shí)例的狀態(tài)灰追，例如通過 聲明的數(shù)據(jù)data()堵幽，那么provide必須使用函數(shù)值。此外弹澎，如果為了使provide鏈接到data中的數(shù)據(jù)朴下，我們需要使用computed()函數(shù)提供一個(gè)計(jì)算屬性
provide() {
return {
message: computed(() => this.xxx)
}
}
大家都知道props是有默認(rèn)值的，在沒有值傳遞過來時(shí)默認(rèn)數(shù)值是多少苦蒿，那inject有沒有呢殴胧，答案是有的，如果我們provide沒有傳遞值時(shí)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創(chuàng)建一個(gè)3的事件車力惯。mitt是一個(gè)體積極小的第三方消息發(fā)布/訂閱式JavaScript庫，與框架無關(guān)召嘶，所以不論是React還是Vue都可以用父晶，示例：
//導(dǎo)入
import mitt from "mitt"
const emitter=mitt()
export default emitter
//用法
import emitter from "xxx";
//觸發(fā)調(diào)用
emitter.emit("clickMe", { xx:xxx });
//監(jiān)聽某一emitter
emitter.on('clickMe', clickMe) // listen
//監(jiān)聽所有emitter
emitter.on('*', (type, e) => console.log(type, e) ) //type為方法名，e為傳遞的數(shù)據(jù)
//取消所有emitter監(jiān)聽
emitter.all.clear()
//創(chuàng)建及移除
function clickMe {}
emitter.on('clickMe', clickMe) // listen
emitter.off('clickMe', clickMe)
鐺鐺鐺～撒花完結(jié)??弄跌，如有不對甲喝，歡迎指正
