Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性

一、自定义v-model实现Vue的双向数据绑定

父组件中 

{{name}}

data() {
     return {
          // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定
          name: '颜色'
     }
},
components: {
     custormModel
}

 组件custormModel

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

 

你可能感兴趣的:(vue点滴)