組件優化的兩三事（二）：input塊組件優化

組件優化的兩三事（二）：input塊組件優化

最近在寫一個動態表單的組件，可見文章 vue: 動態表單實現（單問題線）
在寫該組件時，我在開始所想實現的的是每個組件達到最小塊，再將塊組合到表單中。但在實現時，若我把input封裝成一個組件，頁面實現是沒有問題的，但在該組件的答案獲取確實一個極大的問題。

關於子組件向父組件傳值，我們最通常用的也是最先想到的就是使用$emit，但這首先有個前提是子組件有個交互事件來觸發，後父組件有個地方可以存值。

我最初想到的的方法：
首先我們說的input組件是有一個至多個input組成。
我們將組件中的每個input加上change或blur事件，當出發事件時，要獲取整個組件的所有input值，傳遞給父組件，父組件拿什麼變量來存呢？就是要父組件通過prop提前告訴子組件該變量名，子組件在告訴父組件時，就需要把變量名在告訴會回給父組件

這是一個比較麻煩的流程，vue有一個方法可以稍微簡化一點，就是使用v-model：
關於該方法，其實在vue教程文檔中已明細講述：自定義組件的-v-model

下面是我的個人理解與使用：
父組件：

<!-- 自定義Item -->
<component v-else :is="item.type" :key="item.label" v-model="item.ans" :rule="item"></component>

說明：父組件在使用子組件時，使用v-model綁定一個存在父組件item.ans上子組件的value，和一個input事件，這個input事件可以是change，是屬於父組件的事件，子組件通過$emit調用該事件，父組件的change事件，會自動把value的值賦上去。

子組件：

<template>
	<el-form-item :label="rule.label ? rule.label: ''"">
		// 給input加上事件
		<el-select v-model="value" placeholder="請選擇" @change="submitAns">
			<el-option v-for="(option, option_index) in rule.content" :key="option.label" :label="option.label" :value="option_index"></el-option>
		</el-select>
	</el-form-item>
</template>

<script>
	export default {
		// 聲明model綁定的變量及方法
		model: {
			prop: 'ans',
			event: 'change'
		},
		props: {
			rule: {
				type: Object,
				required: true,
				default: null
			},
		},
		data() {
			return {
				value: null
			}
		},
		methods: {
			submitAns() {
				let index = this.value;
				let option = this.rule.content[index];
				// 調用聲明好的父級change事件，帶value參數
				this.$emit('change', {
					'value': option.value,
					'label': option.label,
					'finish': true,    // 用來標記該input是否每個input都有值
				});
			},
		}
	}
</script>

大概就是上述這樣了，若上述理解或代碼有問題，也請多多指教