先看代码
<template>
<div class="ys-address-input" :class="{'short':shorter}">
<span>{{label}}</span>
<input type="text" :value="value" @input="$emit('input',$event.target.value)" @blur="$emit('validate')" title="" required :placeholder="placeHolder">
</div>
</template>
<script>
export default {
name: "AddressInput",
props:{
label:String,
placeHolder:String,
shorter:{
type:Boolean,
default:false
},
value:[String,Number]
}
}
</script>
<style lang="less" scoped>
//etc
</style>
为了能够在这组件上进行v-model,像这样
<AddressInput v-model="username" @validate="validate" :label="'联系人'" shorter :place-holder="'请输入用户名'"/>
在组件的定义中就需要将value作为props传进去,通过$emit input再抛出