vue3父子组件之间双向数据绑定

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

// 子组件 Child.vue
<template>
  <div>
    <input v-model="value" type="text">
  </div>
</template>

<script>
export default {
  props: ['value'],
  emit: ['input'],
}
</script>

// 父组件 Parent.vue
<template>
  <div>
    <Child v-model="message"></Child>
    <p>Message from child: {{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个示例中，父组件`Parent.vue`通过`v-model`指令将`message`属性与子组件`Child.vue`的`value`属性进行双向绑定。子组件中的输入框通过`v-model="value"`将输入的值绑定到`value`属性上，并且当输入框的值改变时会触发一个名为`input`的事件。父组件通过监听子组件的`input`事件来更新`message`属性的值，实现了双向数据绑定。

注意：在Vue 3中，使用v-model指令时，子组件需要显式地声明接收和触发事件的属性，分别是`props: ['value']`和`emit: ['input']`。