Vue3 中的v-model实现父子组件数据同步通信

v-model在vue2中也就是双向绑定作用，但是在vue3中除了实现双向绑定外，还可以进行组件的通信父子组件的数据同步，接下来看看例子：

<template>
        <h1>{{ num }}</h1>
        <child-event v-model="num"></child-event>
</template> 

<script lang="ts" setup>
import childEvent from "./childEvent.vue"

let num = ref(1000)

以上是父组件的代码，接下来我们实现点击子组件的按钮，同步父组件的num值

<template>
    <div>
        <div>我是子组件</div>
        <button @click="handler1">点击增加100</button>
    </div>
</template>

<script setup lang="ts">
let emits = defineEmits(['update:modelValue'])
let props = defineProps(['modelValue'])
const handler1 = () => {
    emits('update:modelValue', props.modelValue + 100)
    // console.info(props)
}
</script>

以上是子组件的代码

<template>
<child-event v-model="num"></child-event>
 //上面的代码等同于下面的代码
<child-event :modelValue="num" @update:modelValue="handler1"></child-event>

</template>

v-model理论上的作用是：

第一：相当于给子组件传递props['modelValue'] = 1000的属性值

第二：相当于给子组件绑定了自定义事件update:modelValue

所以，这样就实现了父子组件的数据的同步了。