当前位置：首页 > news >正文

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

news 2025/7/13 23:52:57

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>