vue3组合式api 父子组件数据同步v-model语法糖的用法

V-model 大多数情况是用在 表单数据上的， 但它不止这一个作用

---

父子组件的数据同步， 有一个 语法糖 v-model，这个方法简化了语法， 在elementplus中，都有很多地方使用， 所以我们要理解清楚

---

父组件

使用 v-model 向子组件， 传递了一个 money 的数据

<template>
  <div class="parentwrapper">
    我是父组件， 我的money是 {{money}}
    <hr/>
    <child v-model="money"></child>
  </div>
</template>

<script setup>
import {ref} from "vue";
import child from "@/views/Home/child.vue";
let money = ref(10000);
</script>

子组件

<template>
  <div class="child">
    我从父组件那里得到 {{props.modelValue}}
    <button @click="changeMoney">我来改变父组个的money</button>
  </div>
</template>

<script setup>
 let props = defineProps(["modelValue"]);
 let emit = defineEmits(["update:modelValue"]);

 const changeMoney = ()=>{
   emit("update:modelValue",props.modelValue+1000);
 }
</script>

从上面的代码中可以看到，
v-model 对父组件的代码量是有明显减少的， 对子组件中的代码量没有变化， 子组件 一方面是要在 prop 中接收 父组件隐式传来的属性名 modelValue , 另一方面要在子组件中的 自定义一个名为 update:modelValue 的一个事件， 当 子组件的 dom click 事件触发后， 调用 emit("update:modelValue"）

---

这种方式对我们写的组件进行封装是很有做用的，子组件封装好方法， 父组件只需要使用 v-model 就可以，同步子组件中的数据了

---

v-model的进阶用法

上面的例子中，v-model只能在一个子组件中写一次， 那如果我有两个或多个数据要和子组件同步怎么办呢？

我们可以使用 v-model:XXX 来解决

我们在父组件中 利用 v-model 向子组件传递了两个数据 money 和 person

<template>
  <div class="parentwrapper">
    我是父组件， 我的money是 {{money}}
    <hr/>
    <child v-model:money="money" v-model:person="person"></child>
  </div>
</template>

<script setup>
import {ref} from "vue";
import child from "@/views/Home/child.vue";
let money = ref(10000);
let person = ref("孙悟空")
</script>

在子组件中，我们接收到父组件的 v-model：XXX 传来数据

<template>
  <div class="child">
    我从父组件那里得到 {{props.money}}-------{{person}}
    <button @click="changeMoney">我来改变父组个的money</button>
    <button @click="changePerson">我来改变父组件中的person</button>
  </div>
</template>

<script setup>
 let props = defineProps(["money","person"]);
 let emit = defineEmits(["update:moeny","update:person"]);
 const changeMoney = ()=>{
   emit("update:money",props.money+1000);
 }
 const changePerson = ()=>{
   emit("update:person","如来佛祖");
 }

</script>

从上面的代码， 我们看到， 我们在子组件中， 使用 prop 接收了， v-model:XXX 中的 XXX 属性

同时， 我们定义了两个对象的自定义事件 update:XXX 事件

当子组件的 dom click 事件触发时 就emit:XXX 事件

---

父组件中没有添加任何代码就，实现了父子组件的数据同步

这就是 V-model 的语法糖的效果