vue3中v-model父子组件通信

在Vue3中，可以使用v-model来实现父子组件之间的双向绑定和通信。

在父组件中，可以使用v-model来绑定一个值，并将这个值传递给子组件。例如：

<template>
  <div>
    <ChildComponent v-model="childValue" />
    <p>父组件的值：{{ childValue }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childValue: ''
    };
  }
};
</script>

在子组件中，可以通过props接收父组件传递过来的值，并通过emits事件将修改后的值发送给父组件。例如：

<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue'],
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
};
</script>

这样，当子组件中的input的值发生变化时，会通过updateValue方法将新的值发送给父组件，父组件的childValue也会随之更新。同时，父组件中的childValue的变化也会传递给子组件，子组件中的input的值会随之更新。

注意，在子组件中，使用emits来声明可以触发的事件名称，这里使用了update:modelValue，这是Vue3中v-model默认的事件名称