时间戳

首页 > 解决方案 > 在 vuejs 2 中将多个 v-model 附加到动态子组件的循环中

vuejs2 - 在 vuejs 2 中将多个 v-model 附加到动态子组件的循环中

问题描述

最近我遇到了一个问题，我必须在一个循环中显示许多不同的组件，但是：它们中的每一个都应该与父级共享它的状态（有点挖空.js 风格）。我正在通过文档进行挖掘，其中明确指出，Vue.js 将属性以一种方式传递给孩子，而这些最终可以与某些事件发生对话。另外，文档说每个组件只能有一个 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>

等等……然而，在第五个参数之后，我很快意识到代码基本上是混乱的。是否有一些不那么混乱的方法可以将多个双向数据绑定附加到子组件？

标签： vuejs2vue-component

解决方案

解决方案恰好是.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']
})

推荐阅读