在子组件中，v-model会将modelValue prop和update:modelValue event绑定在一起，当子组件的input事件触发时会emit一个update:modelValue event，从而更新父组件的message。而在父组件中，v-model会将message与modelValue prop和update:modelValue event绑定在一起，当父组件更新message时，会通过modelValue prop将message传递给子组件，在子组件中输入内容时，会通过update:modelValue event将新的内容传递给父组件更新message。这样就实现了父子组件之间的数据同步。
父组件
<template><div><h1>v-model:钱数{{ money }}{{pageNo}}{{pageSize}}</h1><input type="text" v-model="info" /><hr /><!-- props:父亲给儿子数据 --><!-- <Child :modelValue="money" @update:modelValue="handler"></Child> --><!-- v-model组件身上使用第一:相当有给子组件传递props[modelValue] = 10000第二:相当于给子组件绑定自定义事件update:modelValue--><Child v-model="money"></Child><hr /><Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1></div>
</template><script setup lang="ts">
//v-model指令:收集表单数据,数据双向绑定
//v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//父亲给子组件数据 props
//子组件给父组件数据 自定义事件
//引入子组件
import Child from "./Child.vue";
import Child1 from "./Child1.vue";
import { ref } from "vue";
let info = ref("");
//父组件的数据钱数
let money = ref(10000);
//自定义事件的回调
const handler = (num) => {//将来接受子组件传递过来的数据money.value = num;
};//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
</script><style scoped>
</style>
子组件可以在<script setup>中使用defineEmits和defineProps来定义props和event。使用v-model时需要定义一个名为modelValue的prop和一个update:modelValue的event
<template><div class="child2"><h1>同时绑定多个v-model</h1><button @click="handler">pageNo{{ pageNo }}</button><button @click="$emit('update:pageSize', pageSize + 4)">pageSize{{ pageSize }}</button></div>
</template><script setup lang="ts">
let props = defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
//第一个按钮的事件回调
const handler = () => {$emit("update:pageNo", props.pageNo + 3);
};
</script><style scoped>
.child2 {width: 300px;height: 300px;background: hotpink;
}
</style>
