最近我遇到了一个问题,我不得不在一个循环中显示许多不同的组件,但是:它们中的每个组件都应该与父级共享它的状态(有点knockout.js风格)。我在挖掘文档,其中明确指出,Vue.js将属性以一种方式传递给childs,而这些属性最终可以与一些事件进行交谈。另外,docs说每个组件只能有一个v-model,所以最后我想出了这样的东西:
<li :is="field.type" v-for="(field, i) in fields" :key="i" :title="field.title" v-on:title-change="title = $event" :somevalue="field.somevalue" v-on:somevalue-change="somevalue = $event"></li>
以此类推。然而,在第五个参数之后,我很快意识到代码基本上是混乱的。有没有什么不那么麻烦的方法可以将多个双向数据绑定附加到子组件?
发布于 2018-06-11 08:16:03
解决方案恰好是一个.sync
方法和正确的事件命名。虽然同步在vue.js 2中已被弃用和删除,但自2.3版本以来,已被重写并以一些类似的形式重新添加。因为实际上它只是一种合成糖,我相信我的成分现在看起来更像样了。
<ol>
<li :is="field.type"
v-for="(field, i) in fields"
:key="field.id"
v-bind.sync="field"
v-on:remove="fields.splice(i, 1)"></li>
</ol>
Vue.component('bool', {
template: '\
<li>\
<input type="text" v-bind:value="title" @input="$emit(\'update:title\', $event.target.value)">\
<button v-bind:value="value" @click="$emit(\'update:value\', !$event.target.value)" :class="{active: value}">{{value}}</button>\
<input type="checkbox" value="1" v-bind:checked="istrue" @change="$emit(\'update:istrue\', $event.target.checked)">\
<button @click="$emit(\'remove\')">Remove</button>\
</li>\
',
data () {
return {}
},
props: ['title', 'value', 'availablevalues']
})
https://stackoverflow.com/questions/50789136
复制相似问题