组件上的v-model、model与sync（包括vue2、vu

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

用sync

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

//父组件
<X :money.sync="num"></X> //区别点
 data() {
    return {
      num: 500
    };
  },

//子组件
<template>
  <div>
    <div class="xx">余额：{{ money }}</div> <!--区别点-->
    <button @click="changeMoney(100)">存100</button>
    <button @click="changeMoney(-100)">取100</button>
  </div>
</template>

<script>
export default {
  props: {
    money: { //区别点
      type: Number
    }
  },
  methods: {
    changeMoney(data) {
      this.$emit("update:money", this.money + data); //区别点
    }
  }
};
</script>

用v-model

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

//父组件
<X v-model="num"></X> <!--区别点-->
 data() {
    return {
      num: 500
    };
  },

<template>
  <div>
    <div class="xx">余额：{{ value }}</div>  //区别点
    <button @click="changeMoney(100)">存100</button>
    <button @click="changeMoney(-100)">取100</button>
  </div>
</template>

<script>
export default {
  props: {
    value: { //区别点
      type: Number
    }
  },
  methods: {
    changeMoney(data) {
      this.$emit('input', this.value + data)  //区别点
    }
  }
};
</script>

子组件中用model

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

//父组件
<X v-model="num"></X> 
 data() {
    return {
      num: 500
    };
  },

<template>
  <div>
    <div class="xx">余额：{{ money }}</div>
    <button @click="changeMoney(100)">存100</button>
    <button @click="changeMoney(-100)">取100</button>
  </div>
</template>

<script>
export default {
    model: {  //区别点
        prop: 'money',
        event: 'emit-money'
    },
  props: {
    money: {
      type: Number
    }
  },
  methods: {
    changeMoney(data) {
      this.$emit("emit-money", this.money + data);  //区别点
    }
  }
};
</script>

总结

• 看到这里你应该就明白了，单独只用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