使用Vue.js進行項目開發，那必然會使用基于組件的開發方式，這種方式的確給開發和維護帶來的一定的便利性，但如果涉及到組件之間的數據與狀態傳遞交互，就是一件麻煩事了，特別是面對有一大堆表單的頁面。

在這里記錄一下我平時常用的處理方式，這篇文章主要記錄父子組件間的數據傳遞，非父子組件主要通過Vuex處理，這篇文章暫時不作說明。

與文檔里給的方案一樣，父組件向子組件傳遞數據主要通過 props，子組件向父組件傳遞數據主要通過觸發器 $emit()，只是在用法上會有些不同。

1、傳遞基本類型數據

當子組件內容較少時，會直接傳遞基本類型數據，通常為String, Number, Boolean三種。

先看個例子：

<!-- 父組件 parent.vue --><template>  <div class="parent">    <h3>問卷調查</h3>    <child v-model="form.name"></child>    <div class="">      <p>姓名：{{form.name}}</p>    </div>  </div></template><script>  import child from './child.vue'  export default {    components: {      child    }，    data () {      return {        form: {          name: '請輸入姓名'        }      }    }  }</script>

<!-- 子組件 child.vue --><template>  <div class="child">    <label>      姓名：<input type="text" :value="currentValue" @input="changeName">    </label>  </div></template><script>  export default {    props: {      // 這個 prop 屬性必須是 valule，因為 v-model 展開所 v-bind 的就是 value      value: ''    },    methods: {      changeName (e) {        // 給input元素的 input 事件綁定一個方法 changeName         // 每次執行這個方法的時候都會觸發自定義事件 input，并且把輸入框的值傳遞進去。        this.$emit('input', e.target.value)      }    }  }</script>

給子組件的 input 事件綁定一個方法 changeName，每次執行這個方法的時候都會觸發自定義事件 input，并且把輸入框的值傳遞進去。

父組件通過 v-model 指令綁定一個值，來接收子組件傳遞過來的數據。但這樣只是父組件響應子組件的數據，如果還要子組件響應父組件傳遞的數據，就需要給子組件定義一個props屬性 value，并且這個屬性必須是 value，不能寫個其它單詞。

v-model 其實就是一個語法糖，詳情可以參考使用自定義事件的表單輸入組件。

2、傳遞引用類型數據

當子組件里的內容比較多時，比如子組件有多個表單元素，如果還像上面那樣給每個表單元素綁定值，那就要寫很多重復代碼了。所以這個時候通常傳遞的是一個對象，傳值的基本原理不變，不過寫法上會有些不同。