這次帶給大家怎樣操作Vue表單類別父子元件資料傳遞，操作Vue表單類別父子元件資料傳遞的注意事項有哪些，下面就是實戰案例，一起來看一下。
使用Vue.js進行專案開發，那必然會使用基於元件的開發方式，這種方式的確給開發和維護帶來的一定的便利性，但如果涉及到元件之間的資料與狀態傳遞交互，就是一件麻煩事了，特別是面對有一大堆表單的頁面。
在這裡記錄我平常常用的處理方式，這篇文章主要記錄父子元件間的資料傳遞，非父子元件主要透過Vuex處理，這篇文章暫時不作說明。
與文件裡給的方案一樣，父元件向子元件傳遞資料主要透過props，子元件向父元件傳遞資料主要透過觸發器 $emit()，只是在用法上會有些不同。
1、傳遞基本類型數據
當子元件內容較少時，會直接傳遞基本類型數據，通常為String, Number , Boolean三種。
先看個例子：
<!-- 父组件 parent.vue -->
<template>
<p class="parent">
<h3>问卷调查</h3>
<child v-model="form.name"></child>
<p class="">
<p>姓名：{{form.name}}</p>
</p>
</p>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
}，
data () {
return {
form: {
name: '请输入姓名'
}
}
}
}
</script>登入後複製
<!-- 子组件 child.vue -->
<template>
<p class="child">
<label>
姓名：<input type="text" :value="currentValue" @input="changeName">
</label>
</p>
</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、傳遞參考類型資料
當子元件裡的內容比較多時，例如子元件有多個表單元素，如果還像上面那樣給每個表單元素綁定值，那就要寫很多重複程式碼了。所以這個時候通常傳遞的是一個對象，傳值的基本原理不變，不過寫法上會有些不同。
還是先看程式碼：
<!-- 父组件 parent.vue -->
<template>
<p class="parent">
<h3>问卷调查</h3>
<child :formData.sync="form"></child>
<p class="">
<p>姓名：{{form.name}}</p>
</p>
</p>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
},
data () {
return {
form: {
name: '请输入姓名',
age: '21'
}
}
}
}
</script>登入後複製
<!-- 子组件 child.vue -->
<template>
<p 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>
</p>
</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 也得是一個物件。
這裡還要注意的是，如果有多個子組件使用一個對象，那就要避免這種寫法，因為一個組件修改了這個對象的數據，那麼其它子組件也就都跟著改變了。
所以我在用的時候都是給每個子元件分配了一個自己的對象，例如：
data () {
return {
parentObject: {
child_1_obj: {},
child_2_obj: {},
}
}
}登入後複製
這是在父元件裡定義的數據，當然名字不會這樣取了。
結尾
也沒什麼說的了，對Vue 還是處於使用的階段，對其底層的東西了解還不夠，我也好想讀讀源碼，但總只是想想.....大家覺得有什麼不妥的地方儘管說，大家相互交流交流。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
使用JS判斷字串中包含內容方法總結
JS HTML5實綁定滑鼠事件的粒子動畫
以上是怎樣操作Vue表單類別父子元件資料傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！
