Присоедините несколько v-моделей к циклу динамических дочерних компонентов в vuejs 2

Question

Недавно я столкнулся с проблемой, когда мне пришлось отображать много разных компонентов внутри цикла, но: каждый из них должен был поделиться своим состоянием с родителем (своего рода стиль knockout.js).Я копался в документах, где четко указывалось, что Vue.js передает свойства в одну сторону потомкам, и те в конечном итоге могут говорить с некоторыми событиями.Кроме того, в документах говорится, что на один компонент может быть только одна v-модель, поэтому в конце концов я придумал что-то вроде этого:

<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>

И так далее ... Еще послеПятый параметр Я быстро понял, что код в основном грязный.Есть ли какой-нибудь менее грязный способ прикрепления нескольких двусторонних привязок данных к дочерним компонентам?

Answer 1

Решение оказалось методом .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']
})