Vue数据双向绑定.sync 和v-model

结论： .sync 和v-model两者的本质都是语法糖， 目的都是实现组件与外部数据的双向绑定。 v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一

.sync修饰符

父组件

// 等价于, 组件属性名称一致,默认事件update

子组件代码

v-model

父组件

// 等价于, 默认prop是value, 默认行为是input

子组件

可以修改默认行为

model: {
    prop: 'checked',
    event: 'change'
}

v-model实例

app.vue

    
        父组件：{{value}}
        
        
        
        

        
    



import child from './Child.vue';

export default {
    components:{
        child
    },

    data(){
        return {
            value: ""
        }
    }
}

Child.vue

  
      子组件：
    
  



export default {
  props: ["value"]
};

运行 vue serve app.vue

修改子组件Child.vue中 model对应的属性和事件， 属性修改为 ： foo 事件修改为：change

  
      子组件：
    
  



export default {
  props: ["foo"],

  model:{
      props: "foo",
      event: "change"

  }
};

父组件app.vue 需要修改为

.sync实例

app.vue

    
        父组件：{{value}}
        
        
        
        

        
    



import child from './Child.vue';

export default {
    components:{
        child
    },

    data(){
        return {
            value: ""
        }
    }
}

  
      子组件：
    
  



export default {
  props: ["foo"]
};

同样实现了v-model的效果

参考 Vue中.sync和v-model的区别 什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？