如何使用Vue中的受控组件在父组件对象中设置值

Question

我知道如何使用受控组件来发出所选的值。例如，

// app-select.vue
<v-select :items="[1,2,3]"  @change="$emit('input', $event)"></v-select>
// parent-component.vue
<app-select v-model="selectedValue" />

因此，更改v-select的值应该会更改父组件上的selectedValue。

但是，如果我有一个对象，我想由一个带有几个选择器的受控组件更新：

parent-comp.vue

<template>
<filter-comp> v-model="filterObj"</filter-comp>
</template>
<script>
import FilterComp from './filtercomp'
export default {
components: {
FilterComp
},
data () {
return {
filterObj: {}
}
}
}
</script>

和一个有几个输入的孩子，能够在输入时发射：

<template>
<v-select :items="filterOneItems" @change="$emit('input', $event)">></v-select>
<v-select :items="filterTwoItems" @change="$emit('input', $event)">></v-select>
</template>

假设我的目标是，当给出v-select输入时，它会在父组件上更新，如下所示：

filterObj: {
filterOne: 'value 1',
filterTwo: 'value 2'
}

有办法让它发挥作用吗？

Answer 1

我能想到两种解决方案。第一个解决方案，只使用道具而不是双向绑定：

对于parent-comp.vue

<filter-comp :obj="filterObj"></filter-comp>

对于filter-comp.vue

<template>
<div>
<v-select :items="items" v-model="obj.filterOne"></v-select>
<v-select :items="items" v-model="obj.filterTwo"></v-select>
</div>
</template>

...
props: {
obj: {
type: Object,
default: {}
}
}
...

JSFiddle

第二种解决方案，如您所述使用v-model：

对于filter-comp.vue

<template>
<div>
<v-select :items="items" @change="change('filterOne', $event)"></v-select>
<v-select :items="items" @change="change('filterTwo', $event)"></v-select>
</div>
</template>

...
methods: {
change(name, value) {
this.$emit('input', {
...this.value,
[name]: value
})
}
}
...

JSFiddle