组件内部使用model对象,event是触发的事件,名字随意,prop是data里边的变量,名字随意。其他没写的data属性不用在意,因为是从项目里拿出来的,为了让model更清晰,就删掉了。主要看箭头指向部分。
<template>
<div>
<Selector
:options="options"
@changeSelect="changeSelect"// < ====================
:selectedValue="myValue"// < ====================
:key="options.length"
value="value"
label="label"
title="房屋状态">
</Selector>
</div>
</template>
<script>
export default {
model:{// < ====================
event:"myChange",// < ====================
prop:"value"// < ====================
},
props:{
value:[String,Number]
},
watch:{
value:{
handler(val){
this.myValue = val
},
}
},
data(){
return {
myValue:""// < ====================
}
},
methods:{
changeSelect(val){
this.$emit("myChange",val)// < ====================
}
}
}
</script>
这时外部直接引用这个组件就可以使用自定义组件v-model了
上一篇:js获取指定月最后一天的日期
下一篇:vue子组件修改父组件数据,不使用v-model的形式