利用v-mode让父组件的值与子组件input框里的值双向绑定

我们知道v-model可以实现数据的双向绑定，但是，如果说这是一个复杂的输入框，在项目中也经常使
用。此时我们我们就把这个输入框封装成组件，那怎么利用v-mode让父组件的值与子组件input框里的
值双向绑定起来。
1）父组件
<InputBox v-model="mes"></InputBox> 根据上面讲的v-model语法糖，所以 InputBox那行代码也
可以写成 <InputBox v-bind:value="value" v-on:input="mes= $event.target.value"> </InputBox>
2）子组件

<template>
	<div>
		<input type='text' ref='input' :value='value' @input='inputNew($event.target.value)'/>
	</div>
</template>
<script>
	export default{
		props:{
			value:{
				type:Number,
				default:100
			}
		},
		data(){
			return {
			}
		},
		methods:{
			inputNew(){
				this.$emit('input',value)
			}
		}
	}
</script>

所以说：
1）接受一个value prop
2）在有新的值时触发input事件并将新值作为参数 。
这样，我们就可以看到子组件和父组件的值就可以联动起来。