一、自定义v-model实现Vue的双向数据绑定
父组件中
<p>{{name}}</p>
<custormModel v-model="name" />
data() {
return {
// 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定
name: '颜色'
}
},
components: {
custormModel
}
组件custormModel
<input type="text"
:value="strName"
@input="$emit('change', $event.target.value)"
>
1、上边的 input 使用了 :value 而不是 v-model
2、上边的 change 要和 model.event 对应起来
3、:value 要和 model.prop 对应起来
export default {
model: {
prop: 'strName', // 对应 props strName
event: 'change'
},
props: {
strName: String,
default(){
return ''
}
},
data() {
return {}
}
}