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

• provide和inject

• mitt
  ok，先說第一個，provide和inject。
  它用于父組件向子孫組件傳遞數(shù)據，provide在父組件中提供要傳給下級的數(shù)據，inject在需要使用這個數(shù)據的子輩組件或者孫輩等下級組件中使用數(shù)據。
  可能會有小伙伴有疑問那我props也是一樣的啊，那試想一下我們有一個大型組件樹，并且一個深度嵌套的組件需要來自遠距離祖先組件的數(shù)據。如果使用 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可以使用對象形式，但是如果我們需要提供每個實例的狀態(tài)，例如通過 聲明的數(shù)據data()，那么provide必須使用函數(shù)值。此外，如果為了使provide鏈接到data中的數(shù)據，我們需要使用computed()函數(shù)提供一個計算屬性

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

大家都知道props是有默認值的，在沒有值傳遞過來時默認數(shù)值是多少，那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創(chuàng)建一個3的事件車。mitt是一個體積極小的第三方消息發(fā)布/訂閱式JavaScript庫，與框架無關，所以不論是React還是Vue都可以用，示例：

//導入
import mitt from "mitt"
const emitter=mitt()
export default emitter
//用法
import emitter from "xxx";
//觸發(fā)調用
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ù)據
//取消所有emitter監(jiān)聽
emitter.all.clear()
//創(chuàng)建及移除
function clickMe {}
emitter.on('clickMe', clickMe)   // listen
emitter.off('clickMe', clickMe) 

鐺鐺鐺～撒花完結??，如有不對，歡迎指正