在Vue中組件實例之間的作用域是孤立的，以為不能直接在子組件上引用父組件的數據，同時父組件也不能直接使用子組件的數據

一、父組件利用props往子組件傳輸數據

父組件：

<div>
  <child v-bind:my-message="parentMsg"></child>//註意傳遞參數時要用—代替駝峰命名，HTML不區分大小寫
</div>

子組件：

Vue.component(‘child‘, {
  // camelCase in JavaScript
  props:{myMessage},
  template: ‘<span>{{ myMessage }}</span>‘
})
 

如上所示，父組件在模板中引用子組件，通過v-bind傳遞參數myMessage，值為parentMsg，其可以為父組件中的動態屬性，同時不用v-bind直接myMessage="hello傳遞靜態值給子組件，則傳遞的值就是hello字符串。在利用props實現傳值的過程中理論上是要實現單向傳遞，即父組件改變相關參數的值，子組件也相應變化，但是子組件對參數的改變不應該影響父組件。但是當props中接收的是父組件傳遞的引用類型（對象或者是數組）時，在子組件中對數據改變時，父組件中的數據也會相應的改變，因為兩者是指向的同一地址內存。如果不想子組件的改變影響父組件可以利用深拷貝，將接受的數據進行深拷貝後在子組件中使用，而不直接操作接受的數據。深拷貝可以直接利用ES6中的obj=Object。assign（{},myMessage）（在computed中定義），這樣子組件的改動將不會影響到父組件。

二、子組件向父組件傳遞參數利用事件機制

子組件通過this.$emit()派發事件，父組件利用v-on對事件進行監聽，實現參數的傳遞

子組件：

   this.$emit(‘changeCart‘,event.target)/*向父組件派發事件，同時傳遞參數event.target,後面的參數的個數不限*/

父組件：

<v-cartcontrol :food="food" v-on:changeCart="changeCart"></v-cartcontrol>

同時當有組件嵌套時則需要利用該機制一層一層的觸發到指定層，不然直接在頂層監聽子組件的子組件的事件是監聽不到的，需要先向父組件派發，父組件在向上層觸發

三、利用ref屬性可以獲取到dom元素或者是子組件，從而可以調用子組件的方法（註意2.0版本用ref取代了el）

1、當ref直接定義在dom元素上時，則通過this.$refs.name可以獲取到dom對dom進行原生的操作

<div class="foods-wrapper" ref="foods-wrapper">

通過this.$refs獲取到dom進行操作（註意ref屬性的命名不能用駝峰，同時獲取的時候也是）

  let menuList=this.$refs[‘menu-wrapper‘].getElementsByClassName(‘menu-list-hook‘);//此處如果用this.$refs["menuWrapper"]將獲取不到元素

2、通過在引用的子組件上使用ref屬性實現父組件調用子組件的方法以及屬性

在父組件中引用子組件並定義ref

<v-food  ref="selectfood"></v-food>

調用定義在子組件中的方法show

 this.$refs.selectfood.show();//同時也可以調用子組件中的屬性

聲明下上面說的是vue 2.0的

vue組件之間的通信以及如何在父組件中調用子組件的方法和屬性