vue中的 v-model 对于子组件来说 可以绑定多个v-model么
时间: 2024-06-19 12:03:45 浏览: 164
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
v-model在子组件中的用法和在普通元素中的用法相同,可以通过props来接收父组件的值,通过$emit来向父组件派发事件更新值。但是一个子组件只能绑定一个v-model,因为v-model本质上就是一个语法糖,它同时绑定了value属性和input事件。如果需要绑定多个值,在子组件中可以使用props接收一个对象,然后在子组件内部修改对象的属性实现值的更新。具体实现如下:[^1][^2]
父组件:
```html
<template>
<div>
<Child :info="form" v-on:update="updateForm"/>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
name: 'Parent',
components: { Child },
data() {
return {
form: {
name: '',
age: ''
}
}
},
methods: {
updateForm(info) {
this.form = info
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<input v-model="info.name">
<input v-model="info.age">
<button @click="$emit('update', info)">更新父组件</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
info: {
type: Object,
required: true
}
}
}
</script>
```
阅读全文