Vueカスタムv-model Vueの双方向データバインドを実現--Vueの高度な特性
783 ワード
一、カスタムv-model Vueの双方向データバインディングを実現する
親コンポーネント
コンポーネントcustormModel
1、上のinputはv-model 2ではなくvalueを使用し、上のchangeはmodelとする.event対応3、:valueはmodelとする.prop対応
親コンポーネント
{{name}}
data() {
return {
// custormModel input , ,
name: ' '
}
},
components: {
custormModel
}
コンポーネントcustormModel
1、上のinputはv-model 2ではなくvalueを使用し、上のchangeはmodelとする.event対応3、:valueはmodelとする.prop対応
export default {
model: {
prop: 'strName', // props strName
event: 'change'
},
props: {
strName: String,
default(){
return ''
}
},
data() {
return {}
}
}