Vueカスタムv-model Vueの双方向データバインドを実現--Vueの高度な特性

783 ワード

一、カスタムv-model Vueの双方向データバインディングを実現する
親コンポーネント

{{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 {}
    }
}