vue自定义组件实现数据双向绑定的两种方式

第一种方式：@input方式

子组件

<template>
	<div class="input-wrap">
		<input class="input" type="text" :readonly="readonly" :value="value" @input="change($event.target.value)">
	</div>
</template>

<script>
export default{
	model:{
		prop: 'value',
		event: 'change'
	},
	props:{
		label:{
			type:String,
			default:'',
		},
		value:{
			type:[String,Number],
			default:''
		},
		readonly:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return{

		}
	},
	methods:{
		change(value){
			this.$emit('change', value)
		}
	}
}
</script>

父组件

<child-input :label="title" v-model="item" :disabled="disabled"></child-input>	

第二种方式：watch方式

子组件

<template>
	<div class="input-wrap">
		<input class="input" type="text" :readonly="readonly" v-model="inputVal">
	</div>
</template>

<script>
export default{
	model:{
		prop: 'value',
		event: 'change'
	},
	props:{
		label:{
			type:String,
			default:'',
		},
		value:{
			type:[String,Number],
			default:''
		},
		readonly:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return{
                    inputVal:this.value
		}
	},
	watch:{
		value(val){
			this.inputVal = val
		},
		inputVal(value){
			this.$emit("change", value)
		}
	}
}
</script>