组件上的v-model、model与sync（包括vue2、vue3的区别）

首先它们都是来表示双向绑定一个props值的，我们用这三种写法来演示同一功能，表现一模一样

用sync

1、父组件中对需要双向绑定的props用sync修饰符；
2、子组件触发update:props的名字；
3、把props的名字由money改成value完全不受影响；但是触发的事件必须是update:props的名字这种形式！

//父组件
 //区别点
 data() {
    return {
      num: 500
    };
  },

//子组件

用v-model

1、父组件用v-model；
2、子组件需要触发input事件；
3、props的名字必须是value，且触发的事件必须是input，换成其他的达咩~

//父组件
 
 data() {
    return {
      num: 500
    };
  },

子组件中用model

1、它算是v-model的升级版；
2、父组件还是用v-model；
3、子组件中添加model属性，里面指定prop和event的名字；
4、注意啦！用了model，虽然父组件上还是v-model，但是props和event的名字就不用固定是value和input了，你完全可以自定义它们两个的名字了！

//父组件
 
 data() {
    return {
      num: 500
    };
  },

总结

• 看到这里你应该就明白了，单独只用v-model，它的限制条件是最苛刻的，props的名字必须是value，触发的event事件必须是input；
• 所以model属性就出来了，虽然父组件还是需要用v-model，但是它的props和event就不用固定为value和input啦~~~
• 这时来看，不管是用法还是命名上还是sync修饰符比较好用一些，它只需要在子组件触发的事件是update:props的名字这种形式即可；
• 在input框、复选框、单选框这些内容上可以优先选择v-model和model；

image.png

2.x与3.x中组件上v-model的不同

• 文档：2.x与3.x中组件上v-model的不同
• vue2中v-model默认的prop是value，触发事件event是input；但是在vue3中，用于自定义组件上的v-model默认的prop改成了modelValue，触发事件改成了update:modelValue；
• vue3中废除了sync；
  
  vue2-v-model.png

vue3-v-model.png