可以通过Vue3中的`v-model`和`props`来实现父子组件传
值的双向绑定。
首先在父组件中定义一个`
input`变量，并将其通过`v-model`绑定到子组件的`
input`
输入框上：
```html
<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`
输入框上：
```html
<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`变量：
```html
<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`
输入框都
会同步更新。
目录大三的asd1
最低0.47元/天 解锁文章
2092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
