在vue3中，怎么实现父组件和子组件的双向绑定

在Vue 3中，可以使用`v-model`指令来实现父组件和子组件之间的双向绑定。下面是一个示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent v-model="message" />
    <p>Message from child component: {{ message }}</p>
  </div>
</template>

<script>
  import { ref } from 'vue';
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    setup() {
      const message = ref('Hello Vue 3');

      return {
        message
      };
    }
  };
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: {
        type: String,
        required: true
      }
    }
  };
</script>

在这个例子中，父组件中使用`v-model`指令来绑定子组件的`message`属性。子组件接收`modelValue`作为属性，并在输入框的`@input`事件中使用`$emit`方法触发`update:modelValue`事件来更新父组件的`message`。

这样，父组件和子组件之间就建立了双向绑定，任何一方的变化都会同步到另一方。