我們實(shí)際編寫(xiě)項(xiàng)目時(shí)往往離不開(kāi)組件之間的相互通信，但是這之間如何通信呢？一般大家可能首先想到props，或者是vuex，今天老將軍換個(gè)新把式，咱說(shuō)下另外兩個(gè)

• provide和inject

• mitt
  ok，先說(shuō)第一個(gè)，provide和inject。
  它用于父組件向子孫組件傳遞數(shù)據(jù)，provide在父組件中提供要傳給下級(jí)的數(shù)據(jù)，inject在需要使用這個(gè)數(shù)據(jù)的子輩組件或者孫輩等下級(jí)組件中使用數(shù)據(jù)。
  可能會(huì)有小伙伴有疑問(wèn)那我props也是一樣的啊，那試想一下我們有一個(gè)大型組件樹(shù)，并且一個(gè)深度嵌套的組件需要來(lái)自遠(yuǎn)距離祖先組件的數(shù)據(jù)。如果使用 props，我們就需要在整個(gè)父鏈中傳遞相同的 props，那不忒麻煩了，自己都寫(xiě)不耐煩了而且容易出錯(cuò)。在此簡(jiǎn)單舉例：

  
  
  props1.png
  
  

  改為Provide / Inject方式后

  
  
  props2.png
  
  具體代碼

//APP.vue
......
  provide() {
    return {
      name: "leah",
      age: 883,
    };
  },

//HomeContent.vue
<script>
    export default {
        inject:["name","age"]
    }
</script>

provide可以使用對(duì)象形式，但是如果我們需要提供每個(gè)實(shí)例的狀態(tài)，例如通過(guò) 聲明的數(shù)據(jù)data()，那么provide必須使用函數(shù)值。此外，如果為了使provide鏈接到data中的數(shù)據(jù)，我們需要使用computed()函數(shù)提供一個(gè)計(jì)算屬性

 provide() {
    return {
      message: computed(() => this.xxx)
    }
  }

大家都知道props是有默認(rèn)值的，在沒(méi)有值傳遞過(guò)來(lái)時(shí)默認(rèn)數(shù)值是多少，那inject有沒(méi)有呢，答案是有的，如果我們provide沒(méi)有傳遞值時(shí)HomeContent.vue可以改為

export default {
  inject: {
    name: {
      default: "leah",
    },
    age: {
      default: "12",
    },
  },
};

如果想使用別名，下面是將name改為testName，如果再使用，那就不是用this.name，而是this.testName

  inject: {
    testName: {
      from: "name",
      default: "12313",
    },
  },

接下來(lái)再說(shuō)一下mitt，vue2.x有EventBus，3把它去掉了。我們可以使用mitt創(chuàng)建一個(gè)3的事件車(chē)。mitt是一個(gè)體積極小的第三方消息發(fā)布/訂閱式JavaScript庫(kù)，與框架無(wú)關(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)聽(tīng)某一emitter
emitter.on('clickMe', clickMe)   // listen
//監(jiān)聽(tīng)所有emitter
emitter.on('*', (type, e) => console.log(type, e) ) //type為方法名，e為傳遞的數(shù)據(jù)
//取消所有emitter監(jiān)聽(tīng)
emitter.all.clear()
//創(chuàng)建及移除
function clickMe {}
emitter.on('clickMe', clickMe)   // listen
emitter.off('clickMe', clickMe) 

鐺鐺鐺～撒花完結(jié)??，如有不對(duì)，歡迎指正