vue3父子组件双向绑定

在Vue 3中，父子组件之间的双向绑定可以通过v-model指令实现。下面是一个简单的示例：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <input v-model="message" placeholder="输入内容">
    <p>子组件传递的值：{{ childMessage }}</p>
    <ChildComponent v-model="childMessage"></ChildComponent>
  </div>
</template>

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

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

子组件 (ChildComponent.vue)：

<template>
  <div>
    <h3>子组件</h3>
    <input v-model="localValue" placeholder="输入内容">
    <button @click="updateParentValue">更新父组件值</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localValue: this.value
    };
  },
  methods: {
    updateParentValue() {
      this.$emit('input', this.localValue);
    }
  }
};
</script>

在父组件中，我们使用v-model指令将`message`变量与子组件的`childMessage`进行双向绑定。在子组件中，我们将`v-model`绑定到本地的`localValue`，并通过`updateParentValue`方法来触发`input`事件，将`localValue`值传递给父组件。

这样，父组件和子组件之间的值就可以实现双向绑定了。当父组件的`message`变化时，子组件的`localValue`也会跟着变化；当子组件的值变化时，会通过`input`事件将新值传递给父组件的`childMessage`。