摘要：我在中寫了這段代碼在組件被創(chuàng)建時(shí)候?qū)?zhí)行此函數(shù)相當(dāng)于進(jìn)入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個回調(diào)函數(shù)按道理在元素被創(chuàng)建的時(shí)候，會將監(jiān)聽到的值賦給并且打印。

天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻
　　　　　　　　　　　　　　　　　　——蕭鼎和我

上一節(jié)列出了５個關(guān)鍵點(diǎn)，第一個路由已經(jīng)解決了，接下來解決第二個問題：

組件的通信問題

一、組件的關(guān)系

組件之間的關(guān)系無非就是兩種父子關(guān)系和沒有父子關(guān)系。為什么我這樣說呢？
按道理應(yīng)該還有兄弟關(guān)系（也就是并列的組件，比如一個組件中引用了hreder和footer組件。），還有爺孫關(guān)系（比如我有七個Calabash Brothers組件，放在的HanHan組件下，而HanHan組件放在了Chairman Mao組件下）
那么不應(yīng)該是父子、爺孫、兄弟關(guān)系嗎？
然而并不是，因?yàn)槲铱戳藇ue的文檔。他的意思就是父子通信和非父子通信。

二、父子之間的通信——Prop和自定義事件

組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。
prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。子組件需要顯式地用 props 選項(xiàng)聲明 “prop”。
將我們的App.vue當(dāng)作父組件，將test當(dāng)作子組件(什么當(dāng)作，本來就是)。
在App.vue中修改我們的：

在Test.vue中接收，并在頁面中顯示：

然后在瀏覽器的顯示效果如下：

綜上所述可以看出，其實(shí)所謂的prop就是在標(biāo)簽添加一個自定義的屬性，然后在子組件中取出這個屬性，用Jquery也可以做嘛(滿腦子，騷，騷想法.jpg)。

上面的例子很漂亮的把父傳子的通信方式展現(xiàn)出來了。但是子傳父呢？
vue文檔中使用的自定義事件。

使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件

我們還是用APP.vue作為父組件，Test.vue作為子組件
App.vue

...
/*增加一個位置來顯示子組件傳過來的值*/
我兒子對我說: {{noSay}}
/* 增加一個自定義的事件mychild,并給他指定觸發(fā)的方法*/

...
data () {
    return {
      noSay: "" // 用來接收子組件穿過來的數(shù)據(jù)
    }
  },
  methods: {
    toFatherSay: function(massage) { // mychlid事件觸發(fā)調(diào)用的方法
      this.noSay = massage // massage就是子組件穿過來的內(nèi)容
    }
  }

Test.vue

....
/*增加一個按鈕，一點(diǎn)擊就向父組件傳值*/
點(diǎn)我傳給父組件
....
data() {
      return {
          massage: "我才不說呢" // 定義一個向父組件傳遞的值
      }
  },
  methods: {
      toFather: function() { // 按鈕點(diǎn)擊觸發(fā)的方法
          this.$emit("myChild",this.massage)// 使用$emit來向父組件傳播
      }
  },
....

做完以上操作之后在瀏覽器上測試：

三、非父子關(guān)系之間的通信——eventBus

在veu文檔上，非父子之間的通信是通過使用一個空的Vue實(shí)例作為中央事件總線。
空的Vue實(shí)例？ and 中央事件總線？
空的Vue實(shí)例也就是說

    var bus = new Vue(); // 的確是一個空的

中央事件總線，難道組件通信要通過全局的事件來進(jìn)行？
的確是這樣，vue提供了$emit和$on方法來進(jìn)行參數(shù)監(jiān)聽(其實(shí)就是個發(fā)布訂閱模式)。
創(chuàng)建一個空的Vue實(shí)例 Bus.js：

import Vue from "vue"
export default new Vue();

將我們的Apart.vue和Bpart.vue當(dāng)作非父子關(guān)系組件：
Apart.vue

Bpart.vue

然后在瀏覽器中測試一下：

有問題?。?！無論怎么點(diǎn)擊我們發(fā)現(xiàn)Bpart中定義的whiteSay并沒有改變，并且第一次點(diǎn)擊控制臺沒有打印。我在Bpart中寫了這段代碼：

   data () {
      return {
          whiteSay: "nihao"
      }
  },
  created: function() { // 在組件被創(chuàng)建時(shí)候?qū)?zhí)行此函數(shù)  相當(dāng)于進(jìn)入頁面的自執(zhí)行
      Bus.$on("whiteSay", function(data) { // 使用$on方法監(jiān)聽white屬性并執(zhí)行一個回調(diào)函數(shù)
          this.whiteSay = data
          console.log(this.whiteSay)
      });
  }

按道理在元素被創(chuàng)建的時(shí)候，會將監(jiān)聽到的值賦給whiteSay并且打印。但是我們注意到第一次點(diǎn)擊，兩個操作都沒有執(zhí)行，也就是說沒有監(jiān)聽到whiteSay值的變化。而第二次之后都監(jiān)聽到了。這是為什么？為什么把值賦給data中定義的whiteSay之后沒有網(wǎng)頁沒有更新？
帶著這兩個問題我去問了度娘和股哥。一下是答案：
第一個為什么： 項(xiàng)目中使用了vue-router，會先加載新的組件，等新的組件渲染好但是還沒掛載前，銷毀舊組件，在掛載新組件。將Apart.vue的代碼修改為：

    ...
 methods: {
      goPage: function () {
          this.$router.push("/bb")
      }
  },
  /*Vue 實(shí)例銷毀后調(diào)用 就是所謂的生命周期鉤子*/
  destroyed() {
    Bus.$emit("whiteSay", "克里斯，關(guān)下門") // 使用$emit方法創(chuàng)建一個鍵值對
    },
    ...

這樣第一個問題就解決了。附上找到的答案連接：https://segmentfault.com/q/10...
第二個為什么：這個是我自己代碼有問題，問了隔壁大神。說是我的作用域有問題，將Bpart.vue中的代碼改為:

···
 created: function() { // 在組件被創(chuàng)建時(shí)候?qū)?zhí)行此函數(shù)  相當(dāng)于進(jìn)入頁面的自執(zhí)行
     var _self = this; // 將當(dāng)前作用域保存在變量中，和$on()的作用域區(qū)分開來
      Bus.$on("whiteSay", function(data) { // 使用$on方法監(jiān)聽white屬性并執(zhí)行一個回調(diào)函數(shù)
          _self.whiteSay = data
          console.log(_self.whiteSay)
      });
  }
···

這樣所有的問題就都解決了。

四、Vuex
當(dāng)我使用了上面幾種方法來實(shí)現(xiàn)組件的通信存在著一些缺陷。比如父組件向子組件傳一個值，子組件將值處理完了返回給父組件，這將同時(shí)用到prop和自定義事件。還不如直接寫一個所有組件都可以訪問的變量呢來得方便呢。比如：

/*這是vuex文檔中的例子*/
const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

再比如當(dāng)項(xiàng)目過大，組件之間的通信將變得難以管理。veux的初衷就是為何更好的管理組件的狀態(tài)。一下是vuex文檔對vuex的定義：

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。

寫得好累，還好最近沒事做，不會被boss罵。

接下來直接開始使用vuex。

先下載
在根目錄下打開cmd：

npm install vuex -save

下載成功看到一下數(shù)據(jù)：

C:Users59227Desktopx-chat>npm install vuex --save
x-chat@1.0.0 C:Users59227Desktopx-chat
`-- vuex@2.1.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.15

然后在main.js中引用，并安裝到Vue上面

import Vuex from "vuex"

Vue.use(Vuex)

前面兩步將Vuex引入到了項(xiàng)目當(dāng)中，接下來如何使用Vuex。
Vuex的核心是一個store（倉庫）這個倉庫的作用就是用來管理應(yīng)用中的state（狀態(tài)）。這里狀態(tài)該怎么理解？
我個人的理解是：所有組件共享的并可以進(jìn)行更改的對象。
除了state的，store還有g(shù)etter、Mutations、Actions以及Modules。在vuex文檔中都有非常詳細(xì)的說明：http://vuex.vuejs.org/zh-cn/s...
籠統(tǒng)的說：

組件獲取 state 用 vuex 的 getter
組件觸發(fā)動作用 vuex 的 action
修改 state 用 vuex 的 mutation

知乎上看到的，說得很貼切易懂。

直接上代碼，建議擼完代碼，再去看一遍vuex的文檔。

main.js

....
const store = new Vuex.Store({ //創(chuàng)建一個倉庫
    state: {  
        showDagger: true, // 定義一個狀態(tài)
    },
    mutations: {// 定義 mutation ，更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交mutation
        daggerCtrl (state) { // 一定要傳入state，并且是第一個參數(shù)
            state.showDagger = !state.showDagger  // 將showDagger值取反
        }
    }
})
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router, // 將router對象傳給vue，這樣就可以通過this.$router獲取到router對象了
  store, // 將store對象傳給vue，這樣就可以通過this.$store獲取到store對象了
  template: "", 
  components: { App }
})

然后更改App.vue：

dagger.vue

打開瀏覽器 看效果：

使用vuex實(shí)現(xiàn)組件通信就搞定了，更多的用法請參考vuex文檔。