使用Vue.js進行項目開發，那必然會使用基于組件的開發方式，這種方式的確給開發和維護帶來的一定的便利性，但如果涉及到組件之間的數據與狀態傳遞交互，就是一件麻煩事了，特別是面對有一大堆表單的頁面。
在這里記錄一下我平時常用的處理方式，這篇文章主要記錄父子組件間的數據傳遞，非父子組件主要通過Vuex處理，這篇文章暫時不作說明。
與文檔里給的方案一樣，父組件向子組件傳遞數據主要通過 props，子組件向父組件傳遞數據主要通過觸發器 $emit()，只是在用法上會有些不同。
1、傳遞基本類型數據
當子組件內容較少時，會直接傳遞基本類型數據，通常為String, Number, Boolean三種。
先看個例子：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!-- 父組件 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>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!-- 子組件 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、傳遞引用類型數據
當子組件里的內容比較多時，比如子組件有多個表單元素，如果還像上面那樣給每個表單元素綁定值，那就要寫很多重復代碼了。所以這個時候通常傳遞的是一個對象，傳值的基本原理不變，不過寫法上會有些不同。
還是先看代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!-- 父組件 parent.vue -->
? <template>
??<div class="parent">
????<h3>問卷調查</h3>
????<child :formData.sync="form"></child>
????<div class="">
??????<p>姓名：{{form.name}}</p>
????</div>
??</div>
</template>
? <script>
??import child from './child.vue'
? ??export default {
????components: {
??????child
????},
????data () {
??????return {
????????form: {
??????????name: '請輸入姓名',
??????????age: '21'
????????}
??????}
????}
??}
</script>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!-- 子組件 child.vue -->
? <template>
??<div class="child">
????<label>
??????姓名：<input type="text" v-model="form.name">
????</label>
????<label>
??????年齡：<input type="text" v-model="form.age">
????</label>
????<label>
??????地點：<input type="text" v-model="form.address">
????</label>
??</div>
</template>
? <script>
??export default {
????data () {
??????return {
????????form: {
??????????name: '',
??????????age: '',
??????????address: ''
????????}
??????}
????},
????props: {
??????// 這個 prop 屬性接收父組件傳遞進來的值
??????formData: Object
????},
????watch: {
??????// 因為不能直接修改 props 里的屬性，所以不能直接把 formData 通過v-model進行綁定
??????// 在這里我們需要監聽 formData，當它發生變化時，立即將值賦給 data 里的 form
??????formData: {
????????immediate: true,
????????handler (val) {
??????????this.form = val
????????}
??????}
????},
????mounted () {
??????// props 是單向數據流，通過觸發 update 事件綁定 formData，
??????// 將 data 里的 form 指向父組件通過 formData 綁定的那個對象
??????// 父組件在綁定 formData 的時候，需要加上 .sync
??????this.$emit('update:formData', this.form)
????}
??}
</script>
|
props 是單向數據流，當我們需要對 props 內的屬性進行雙向綁定時，就需要用到.sync 修飾符，詳情請參考.sync 修飾符，這里不做贅述。
這里需要注意的是，vue 中是不能直接修改 props 的，所以如果我們要向父組件傳值，還是需要通過修改 data 里的值，prop 只是作為父子之間通話的中間人存在。
另外，如果我們想要預覽父組件最開始傳的數據，就需要通過 watch 監聽 prop 的變化，在子組件初始化的時候就把值傳進去。
注意：?我在子組件里把 this.$emit('update:formData', this.form) 放在 mounted 當中的，其原因是為了避免在每個 input 標簽的 input 事件中觸發自定義事件，但這樣寫的前提是，父子組件都要共用一個對象。
這也就是上面代碼中，父組件中使用 :formData.sync="form" 綁定值時，form 是一個對象，而子組件中的觸發自定義事件 this.$emit('update:formData', this.form) ，this.form 也得是一個對象。
這里還需要注意的是，如果有多個子組件使用一個對象，那就要避免這種寫法，因為一個組件修改了這個對象的數據，那么其它子組件也就都跟著改變了。
所以我在用的時候都是給每個子組件分配了一個自己的對象，比如：
| 1 2 3 4 5 6 7 8 | data () {
?return {
??parentObject: {
???child_1_obj: {},
???child_2_obj: {},
??}
?}
}
|
這是在父組件里定義的數據，當然名字不會這樣取了。
結尾
也沒什么說的了，對 Vue 還是處于使用的階段，對其底層的東西了解還不夠，我也好想讀讀源碼，但總只是想想.....大家覺得有什么不妥的地方盡管說，大家相互交流交流。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
)
![[java設計模式簡記] 觀察者模式(Observer-Pattern)](http://pic.xiahunao.cn/[java設計模式簡記] 觀察者模式(Observer-Pattern))
