组件优化的两三事（二）：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>

大概就是上述这样了，若上述理解或代码有问题，也请多多指教