vue3 v-model父子通信

在Vue3中，v-model可以方便地实现父子组件之间的数据双向绑定。具体来说，父组件可以通过v-model绑定子组件的modelValue prop和update:modelValue event，从而实现父子组件之间的数据同步。在父组件中，我们可以这样使用v-model:propName来绑定子组件的modelValue prop和update:modelValue event：

<ChildComponent v-model:modelValue="message" />

在子组件中，我们需要声明一个名为modelValue的prop，并且在子组件中修改modelValue时，需要通过$emit方法触发update:modelValue event，从而通知父组件更新数据。具体代码示例如下：

<template>
  <div>
    <h3>子组件</h3>
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </div>
</template>

<script setup>
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  }
</script>

这样，当子组件中的输入框内容发生变化时，就会触发update:modelValue event，从而通知父组件更新数据。同时，父组件中的message变量也会随之更新，从而实现了父子组件之间的数据同步。