我们通常在input、select等表单元素上使用v-model指令，通过这个指令来实现双向绑定。既然是双向绑定，那么就有传入和传出的方式，一般实现方式如下：

• 传入通过动态绑定的形势如:value="mValue"
• 传出通过事件监听方式，子组件发布事件this.$emit('change', this.value)，父组件监听事件@change="changeValue"

v-model将上面两部就行整合，默认实现动态绑定和input事件监听。具体看文档 但v-model只能用于input等内置标签，如果我们的自定义组件要使用怎么办呢？这里通过一个简单例子实现v-model 代码如下：

// 父组件
<template>
	<div>		
		<label for="input-value">父元素value: </label>
		<input type="number" v-model="inputValue" id="input-value"/>	
		<value-child v-model="inputValue" @input="changeValue"></value-child>
	</div>
</template>

<script>
	import ValueChild from './value-child'
	export default {
		components: { ValueChild },
		data() {
			return {
				inputValue: 0
			}
		},
		methods: {
			// v-model 默认实现input监听，这里只做事件的确认测试，实际情况请忽略该事件
			changeValue(e) {
				console.log(e);
			}
		}
	}
</script>

<style>
</style>

// 子组件
<template>
	<div>
		子元素value: {{childValue}}
		<button @click="changeValue">changeValue</button>
	</div>
</template>

<script>
	import ValueChild from './value-child'
	export default {
		props: {
			value: {
				type: [Number, String]
			}
		},
		data() {
			return {
				childValue: 0
			}
		},
		watch: {
			// copy value 用于改变数据
			value: {
				handler(val) {
					this.childValue = val;
				},
				immediate: true
			}
		},
		methods: {
			changeValue() {
				this.childValue = parseInt(Math.floor(Math.random() * 100));
				// 抛出imput事件，v-model实现机制是默认input事件
				this.$emit('input', this.childValue);
				// 测试事件
				this.$emit('change', this.childValue);
			}
		}
	}
</script>

<style>
</style>