1. 最常用，最經(jīng)典，props傳值--父傳子

Props傳值適用于父組件傳遞數(shù)據(jù)給子組件，父組件在使用子組件的標簽中通過字面量來傳值，子組件中使用props來定義接收父組件傳遞過來的參數(shù)

接下來我們來看一個例子，這里我封裝了elementUI的列表項，在父組件中的子組件標簽中設置了一些參數(shù)，并在子組件中規(guī)定預期類型的構造函數(shù)。

其中，我在父組件中的fixed的值雖然是true是一個靜態(tài)的值，但我們還是需要v-bind來進行綁定，因為這是一個js表達式，而不是字符串。

所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，自然地將新的狀態(tài)向下流往子組件，而不會逆向傳遞。這避免了子組件意外修改父組件的狀態(tài)的情況，不然應用的數(shù)據(jù)流將很容易變得混亂而難以理解。

PS：這里props接受還有另外一種數(shù)組的形式接收。

export default {
     props: ['foo'],
    created() { // props 會暴露到 `this` 上 console.log(this.foo)
  }
 }

使用對象形式來接受可以對每個 prop 進行數(shù)據(jù)類型的校驗，設置默認值。這是數(shù)組形式接受做不到的。

2. 全局事件總線--子傳父

說到子傳父，大家都會想到$emit,然后父組件通過@接收，還要在父組件的子標簽上定義，這是官方的方法。但是在template中會顯得很繁瑣，所以，全局事件總線很完美的解決了這個問題，在中小型項目上的表現(xiàn)甚至優(yōu)于vuex，而且全局事件總線不光可以用來子傳父，他還能做到$emit一步做不到的兄弟組件之間傳值，接下來讓我們看個例子。

我在main中定義了

//全局事件總線

Vue.prototype.$Bus = new Vue()

這里的Bus就是方法名，大家可以自己隨便定義，意思是在Vue原型對象身上創(chuàng)建一個名為Bus的方法，因為Vue的原型對象的屬性的方法都可以被Vue實例對象和VC組件實例對象訪問得到，所以通過全局事件總線，兄弟組件之間也能傳值。

它的使用方法也特別簡單：

兄弟組件通過$emit觸發(fā)自定義事件，另一個組件可以通過$on來接受，這種方法避免了在div中繁瑣的監(jiān)聽，轉而直接在script中使用，可以說功能性和實用性上對“@接收”碾壓。

最后，大家不要忘了在監(jiān)聽使用頁面的beforeDestroy()使用以下代碼來解綁監(jiān)聽事件。一定要寫事件名。不然會把全局事件總線綁定的事件全部解綁了。

this.$Bus.off(‘監(jiān)聽的事件名’)