vue3复合api中父组件和子组件之间的数据绑定

Question

我已经成功地在vue 3中以双向格式绑定了数据，如下所示:

<template>
<p for="">Year of Incorporation</p>
<input type="text" v-model="input" />
<div>
{{ input }}
</div>
</template>
<script>
export default {
setup() {
let input = ref("")
return {input};
},
};
</script>

我现在要做的是把输入放到子组件中，像这样:

父组件:

<template>
<Child v-model="input" />
{{input}}
</template>

子组件:

<template>
<input type="text" v-model="babyInput" />
</template>
<script>
export default {
setup() {
let babyInput = ref("")
return {babyInput};
},
};
</script>

Answer 1

Vue.js documentation提供了一种用自定义组件处理v-model指令的好方法:

• 将值绑定到子组件
• 当子进程的输入发生变化时触发一个事件

你可以从文档中看到这个例子，当你切换右上角的开关(在https://vuejs.org/guide/components/events.html#usage-with-v-model)。