用vue3实现 父组件中定义一个变量input输入框，传递到子组件input输入框，子组件定义一个属性，回传到父组件，页面初始化时候就展示数据，在子组件改变父组件变量值，同步展示在父子组件的input输入框里，在父组件改变子组件的变量值，同步展示在父子组件

可以通过Vue3中的`v-model`和`props`来实现父子组件传值的双向绑定。

首先在父组件中定义一个`input`变量，并将其通过`v-model`绑定到子组件的`input`输入框上：

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

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      input: 'hello world',
    }
  },
}
</script>

然后在子组件中定义一个名为`value`的`props`属性，并将其绑定到`input`输入框上：

<template>
  <div>
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
    <p>子组件value值：{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    value: {
      type: String,
      required: true,
    },
  },
}
</script>

这里的`:value`是将`value`绑定到`input`的`value`属性上，`@input`则是监听子组件输入框的输入事件，并将输入的值通过`$emit`方法派发出去。

最后，在父组件中可以通过监听子组件派发出来的`input`事件来同步更新父组件的`input`变量：

<template>
  <div>
    <ChildComponent v-model="input" @input="input = $event"></ChildComponent>
    <p>父组件input值：{{ input }}</p>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      input: 'hello world',
    }
  },
}
</script>

这里的`@input="input = $event"`表示监听子组件派发的`input`事件，并将其值赋给父组件的`input`变量。这样，父组件和子组件的`input`输入框都会同步更新。