首先它們都是來表示雙向綁定一個(gè)props值的，我們用這三種寫法來演示同一功能律罢，表現(xiàn)一模一樣

用sync

1膀值、父組件中對(duì)需要雙向綁定的props用sync修飾符；
2误辑、子組件觸發(fā)update:props的名字沧踏；
3、把props的名字由money改成value完全不受影響巾钉；但是觸發(fā)的事件必須是update:props的名字這種形式翘狱！

//父組件
<X :money.sync="num"></X> //區(qū)別點(diǎn)
 data() {
    return {
      num: 500
    };
  },

//子組件
<template>
  <div>
    <div class="xx">余額：{{ money }}</div> <!--區(qū)別點(diǎn)-->
    <button @click="changeMoney(100)">存100</button>
    <button @click="changeMoney(-100)">取100</button>
  </div>
</template>

<script>
export default {
  props: {
    money: { //區(qū)別點(diǎn)
      type: Number
    }
  },
  methods: {
    changeMoney(data) {
      this.$emit("update:money", this.money + data); //區(qū)別點(diǎn)
    }
  }
};
</script>

用v-model

1、父組件用v-model砰苍；
2潦匈、子組件需要觸發(fā)input事件阱高；
3、props的名字必須是value茬缩，且觸發(fā)的事件必須是input赤惊，換成其他的達(dá)咩~

//父組件
<X v-model="num"></X> <!--區(qū)別點(diǎn)-->
 data() {
    return {
      num: 500
    };
  },

<template>
  <div>
    <div class="xx">余額：{{ value }}</div>  //區(qū)別點(diǎn)
    <button @click="changeMoney(100)">存100</button>
    <button @click="changeMoney(-100)">取100</button>
  </div>
</template>

<script>
export default {
  props: {
    value: { //區(qū)別點(diǎn)
      type: Number
    }
  },
  methods: {
    changeMoney(data) {
      this.$emit('input', this.value + data)  //區(qū)別點(diǎn)
    }
  }
};
</script>

子組件中用model

1、它算是v-model的升級(jí)版凰锡；
2未舟、父組件還是用v-model；
3掂为、子組件中添加model屬性裕膀，里面指定prop和event的名字；
4勇哗、注意啦昼扛！用了model，雖然父組件上還是v-model智绸，但是props和event的名字就不用固定是value和input了野揪，你完全可以自定義它們兩個(gè)的名字了！

//父組件
<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: {  //區(qū)別點(diǎn)
        prop: 'money',
        event: 'emit-money'
    },
  props: {
    money: {
      type: Number
    }
  },
  methods: {
    changeMoney(data) {
      this.$emit("emit-money", this.money + data);  //區(qū)別點(diǎn)
    }
  }
};
</script>

總結(jié)

• 看到這里你應(yīng)該就明白了瞧栗，單獨(dú)只用v-model斯稳，它的限制條件是最苛刻的，props的名字必須是value迹恐，觸發(fā)的event事件必須是input挣惰；
• 所以model屬性就出來了，雖然父組件還是需要用v-model殴边，但是它的props和event就不用固定為value和input啦~~~
• 這時(shí)來看憎茂，不管是用法還是命名上還是sync修飾符比較好用一些，它只需要在子組件觸發(fā)的事件是update:props的名字這種形式即可锤岸；
• 在input框竖幔、復(fù)選框、單選框這些內(nèi)容上可以優(yōu)先選擇v-model和model是偷；

image.png

2.x與3.x中組件上v-model的不同

• 文檔：2.x與3.x中組件上v-model的不同
• vue2中v-model默認(rèn)的prop是value拳氢，觸發(fā)事件event是input；但是在vue3中蛋铆，用于自定義組件上的v-model默認(rèn)的prop改成了modelValue馋评，觸發(fā)事件改成了update:modelValue；
• vue3中廢除了sync刺啦；
  
  vue2-v-model.png

vue3-v-model.png