我們知道vue的精華就在于元件話開發，第一次看vue的時候懵懵懂懂，隻是大概了解了怎麼去用。今天閑來無事第二次去看發現了很多精華的東西，現在寫出來與大家分享下。
vue的元件間通信一般分為父子元件通信和兄弟元件通信。父子元件通信是一層一層向下傳遞prop然後一層層通過事件向上傳遞。而兄弟元件之間通信一般通過vuex進行，在本文中就不多贅述。
單向資料流
這是父子元件的核心概念，prop是單向綁定的。當父元件的屬性發生變化的時候，會傳導到子元件。但是反之，為了防止子元件無意間修改來父元件的狀态，從下往上的資料流是不允許的。
下面我們舉個栗子：
父元件
子元件
當父元件屬性改變時，會傳導進子元件。而子元件的屬性改變時，會報錯。
那麼如果是不是局的props有點雞肋了，隻能初始化元件的時候用，在子元件内并不能進行操作。
其實還是用兩種辦法去操作props的：
1.定義一個局部變量，并用props初始化它，以後操作這個局部變量。
當我們将0傳入子元件時，然後點選按鈕看一下變化。
2.定義一個計算屬性，處理prop的值并傳回。
自定義事件
了解了元件對單向資料流，我們知道了元件從上至下是通過prop傳遞進行通信的。那從下往上怎麼辦呢？vue規定子元件通過觸發事件來與父元件進行通信。即父元件在調用子元件時，定義事件，子元件通過觸發這個事件來與父元件進行通信。
父元件通過v-on:eventName="parentEventName"來設定監聽，子元件通過$.emit('eventName')來觸發事件。
我們給子元件綁定來trigger事件，事件源是父元件的myClick事件，并調用來child子元件兩次。而子元件child中的按鈕被點選時，子元件add事件觸發，将自身的count++，且觸發letrigger事件将父元件内的total++。
而且更奇妙的是，子元件觸發事件時可以使用載荷(payload)。讓我們來修改下demo
我們通過子元件觸發父元件的事件，将子元件input的内容發送給父元件。
當然，有時候我們想給子元件的根元素綁定原生事件，此時可以使用修飾符.native來進行操作。
此時我們給子元素綁定原生點選事件，來監測滑鼠的點選位置。
.sync修飾符
單向資料綁定可以防止子元件無意間去竄改父元件的狀态，雙向資料綁定在一定的場景下也是有一定用處的。比如在開發可複用的元件庫時，雙向資料綁定顯得十分有用。
.sync修飾符幫我們做到來這一點，在vue2.0中.sync被移除了，在vue2.3.0又被重新引入，隻是做了很大的修改。.sync現在作為一個文法糖來使用，他會被擴充為一個自動更新父元件屬性的v-on監聽器。
總結一下就是.sync隻是在底層自動為子元件綁定來一個監聽事件，子元件隻需要在需要修改父元件狀态時去手動觸發他就OK了。
例如：
會被擴充為：
是不是很眼熟，它隻是将bar的值綁定在了child上，同時給child綁定了一個update:foo的監聽事件。相對應的我們隻需要在子元件定義foo的prop，然後手動$.emit('update:foo')進行觸發就可以了。
多說無益，上個demo
這裡我們通過watch變量my_msg來觸發事件，更新父元件。
EventBus 實作非父子元件通信
通過執行個體化一個Vue對象( 比如bus = new Vue() )作為母線，在元件中通過事件将參數傳遞出去( bus.$emit(event, [...args]) )，然後在其他元件中再通過bus( 這裡按照剛前面執行個體化Vue對象後的叫法 )來監聽此事件并接受參數( bus.$on(event, callback) )。
PS: 共用同一個Vue的執行個體( new Vue() )，通過此執行個體進行事件傳遞參數，在其他元件中監聽此事件并且接收參數實作通信。
例子
bus.js （執行個體化一個Vue對象）
元件Hello.vue
元件World.vue
元件Home.vue （同時引入Hello.vue元件和World.vue元件）
效果圖展示：
傳遞參數後：
VUEX實作元件通信
項目中利用 vue的輔助函數傳值和取值
建立一個store.js檔案
在vue執行個體中注冊store
在App.vue元件中使用mapMutations傳參，修改state資料（狀态）
要點： 要寫在methods下面，
因為mapActions/mapMutations隻是把action/mutation函數綁定到你的methods裡了;你調methods裡的方法的時候照常傳參就可以了。
再定義一個子元件，擷取state對象裡面的資料