簡單說說vue的父子組件，父子組件傳值和vuex

1、vue的父子組件之間是如何傳值的？
首先呢，須要說說的是，vue既然有雙向綁定，那爲什麼會有父子組件之間的傳值問題？這個問題也簡單，vue的組件會供其餘的vue頁面進行調用，若是數組都是雙向綁定的話，那麼就容易混亂了，好比a,b頁面綁了一個num=10，那b，c頁面又綁了num=5,那vue實例的num到底聽誰的？因此，這就是vue官網爲何說
組件之間的數據只能是單項流通的，並且由父組件傳遞給子組件
好，接下來就話很少說了，父子組件是如何傳值的，並且誰是父誰是子呢？
例子1：先寫一個組件放在component文件夾下叫son.vue好了（有點劇透的命名...）

<template>
  <div>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">這裏是son的num：{{num}}</p>
  </div>
</template>
<script>
export default {
  //props:["num"],//接收父組件傳遞過來的值，這裏我先寫上
  data () {
    return {
        num:0
    }
  },
   methods:{
       add(){//es6的語法至關於add:function(){}
           this.num++;
       },
       minu(){
           this.num--;
       }
   }
}
</script>

這個son.vue的組件相信你們都看得懂，加減num的組件。接下來寫一個index.vue調用son.vue

//index.vue
<template>
  <div>
    <son v-bind:num="num"></son>//傳遞一個值給son.vue，這時候能夠把son.vue的props那個註釋註銷掉了
    <p class="text-link">這裏是index的num：{{num}}</p>
  </div>
</template>
<script>
import son from './../components/son' 
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
     }
}
</script>

這時候兩個num都是10。再次點擊加減按鈕，咱們會發現，‘son的num’一直有變化，而‘index的num’一直是10，這就是數據的單項流通。那麼咱們如何點擊按鈕而後改變‘index的num’呢？這時候，須要$emit幹活了。

咱們須要在index.vue裏改動一下代碼
首先：

<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"就是綁定一個自定義事件

再增長

methods:{
   icr(){
       this.num++;
   },
   der(){
       this.num--;
   }
}

而後在son.vue中methods變成

methods:{
   add(){
       this.$emit("add");//$emit("add")就是觸發父組件中的add方法
   },
   minu(){
       this.$emit("minu");
   }
}

因此，$emit("xxx")觸發了父組件的函數，改變了父組件的data的num值，父組件再經過props傳值給子組件。從而實現數據傳遞，父子組件通訊。
這是son.vue和index.vue的完整代碼

//son.vue
<template>
<div>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">這裏是{{num}}</p>
</div>
</template>
<script>
export default {
  props:["num"],
  data () {
    return {
        num:10
    }
  },
   methods:{
       add(){
           this.$emit("add");
       },
       minu(){
           this.$emit("minu");
       }
   }
}
</script>

//index.vue
<template>
 <div>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link">父{{num}}</p>
</div>
</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

2、說說vuex以及他的state、actions、getters、mutations、modules、store
首先，vuex官網上說是一個vue的狀態管理工具。可能狀態比較難理解，你們能夠簡單地把狀態理解成爲vue的data裏面的變量。當組件之間的data變量關係複雜一點的時候，就把其中的變量抽離出來管理。恰好你們能夠看看上面，父子組件之間的num之間的通訊是否是比較麻煩，改變數據還要用$emit。若是有一個地方跟倉庫同樣就存放着num的值，誰要用誰去請求num的值，誰想改就改該多好是吧，vuex就是幹這個的，有點全局變量的意思。任何組件須要拿，改東西，均可以找他。

一、首先state是唯一的數據載體，跟倉庫同樣。
二、而mutations是惟一能夠改變state的值的東東，使用commit等。
這兩個是vuex最最基礎缺一不可的。簡單的vuex管理就使用這兩個就行，如何使用vuex？看這裏https://segmentfault.com/a/11...
三、getters的官方說明：派生出新的狀態，這個比較難理解。簡單來講，就是過濾，組合！
好比說state裏面存了一個數組，數組有好多個數據，而我只想要用status：0的那些個，就能夠用getters。是否是有點過濾的意思。因此getters有時候還很好用，很必要！。
四、actions是用來提交mutations，爲何不用actions直接修改state值呢？其實大多數的管理工具都是這樣作的，好比redux，mobx。actions定義修改的動做而且進行數據請求，經過commit再去觸發對應的mutations。是很重要的一個屬性，也符合解耦的思想。
五、modules也是輔助方法。好比modulesA有一個完整的state、actions、getters、mutations；modulesB也能夠有一個完整的state、actions、getters、mutations，他就是將store分割成模塊，避免混淆。

好了，今天就說這一些，仍是須要本身多看官網文檔，多實踐。跪求各位大牛指導！學習真難，求帶帶我...

最後仍是說一下，若是文章對你有幫助的話，請給我一個star鼓勵一下，我還沒工做呢。。。嗚嗚嗚