vue 自定义双向绑定

vue 自定义双向绑定

背景：父子组件props通信是单向的，如何双向通信呢。

<!-- children.vue -->
<template>
	<a-input:value="val" @input="(e)=>{this.$emit('change',e.target.value)}"/>
</template>
<script>
export default {
	props:{
		// 须定义和model相同的props名称
	    val:{
	    	required: true
	    }
	},
	model:{
	    prop:'val',        // 父组件设置v-model的变量值
	    event:'change'     // 父组件监听message事件
	},
}
</script>

<!-- parent.vue -->
<template>
	<!-- 父组件通过v-model把message传递给子组件 -->
	<children v-model="message"></children>
</template>