vue之组件间v-model通信

假如要使原生元素例如input输入框与实例数据双向绑定，我们都知道可以直接使用v-model指令。那如果是两个自定义组件间通信该如何使用v-model？

首先要清楚v-model的原理：

<input-con v-model="inputVal"></input-con>

等价于

<input-con :value="inputVal" @input="inputVal = $event.target.value"></input-con>

v-model的双向数据绑定是依靠v-bind绑定prop和v-on监听传值所完成的，那么就好办了。还是这个input框的例子：
子组件：

<template>
	<div>
		<input type="text" v-model="inputValue" @input="inputAct"/>
	</div>
</template>
<script>
exprot default {
	name: "inputCon",
	props: ["value"],
	data() {
		return {
			inputValue: ''
		}
	},
	methods: {
		inputAct() {
			this.$emit('input', this.inputValue)
		}
	},
	watch: {
		value(newValue) {
			this.inputValue = newValue
		}
	}
}
</script>

父组件：

<template>
	<div>
		<inputCon v-model="inputVal"></inputCon>
		<span>{{inputVal}}</span>
		<button @click="valChange">click</button>
	</div>
</template>
<script>
exprot default {
	data() {
		return {
			inputVal: ''
		}
	},
	methods: {
		valChange() {
			this.inputVal = '666'
		}
	}
}
</script>

这套工作的重点在于给了子组件"value"这个prop值。原理是：将父组件的数据和子组件身上的"value"用v-model建立双向绑定。
1.子组件内的数据变动通过监听某事件(例子：input)向上传递改变组件自身的value，在v-model的v-on监听工作上传递给父组件的数据(例子：inputVal )；
2.而父组件的数据变动在v-model的v-bind绑定工作上传给子组件的valueprop值。但注意，此时数据变动仅仅只被value接收，最后一步还需要在子组件内用watch监听value将值传给组件内的数据(例子：inputValue )。
至此，组件间数据的v-model双向通信工作就完成了。