vue v-model解析及实现-CSDN博客

1.v-model 解析

• 语法糖
• 在内部为不同的输入元素使用不同的property并抛出不同的事件：

a. text 和 textarea 元素使用 value property 和 input 事件；
b. checkbox 和 radio 使用 checked property 和 change 事件；
c. select 字段将 value 作为 prop 并将 change 作为事件。

2.v-model实现

### parent.vue
<template>
	<div>
		<s-input v-model="value" />
		<p>{{value}}</p>
	</div>
</template>
<script>
import sInput from './sInput.vue'
export default{
	components: { sInput },
	data(){
		return {value: ''}
	}
}
</script>

a. input事件

### sInput.vue
<template>
	<input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default{
	props: {
		value: {
			type: String,
			default: ''
		}
	}
}
</script>

b. change事件

### sInput.vue
<template>
	<input type="text" :value="value" @change="$emit('change', $event.target.value)" />
</template>
<script>
export default{	
	//解析v-model指令
	model: {
		prop: 'value',
		event: 'change'
	},
	props: {
		value: {
			type: String,
			default: ''
		}
	}
}
</script>