Vue.js 父子组件动态双向数据绑定

Question

我正在尝试结合使用 v-for 和 v-model 来为某些输入表单获取双向数据绑定。我想动态创建子组件。目前，我没有看到子组件更新父数据对象。

我的模板是这样的

<div class="container" id="app">
  <div class="row">
    Parent Val
    {{ ranges }}
  </div>

   <div class="row">
     <button 
        v-on:click="addRange"
        type="button" 
        class="btn btn-outline-secondary">Add time-range
     </button>
    </div>

  <time-range 
    v-for="range in ranges"
    :box-index="$index"
    v-bind:data.sync="range">
  </time-range>

</div>

<template id="time-range">
  <div class="row">
    <input v-model="data" type="text">
  </div>
</template>

还有这个js

Vue.component('time-range', {
  template: '#time-range',
  props: ['data'],
  data: {}
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
    addRange: function () {
        this.ranges.push('')
    },
  }
})

我也做了一个 js fiddle https://jsfiddle.net/8mdso9fj/96/

Answer 1

注意：使用数组会使事情复杂化：您不能修改别名（v-for 变量）。

一种不经常提及的方法是catch the native input event as it bubbles up to the component。这可能比在链上传播 Vue 事件要简单一些，只要您知道组件中某处有一个元素发出原生 input 或 change 事件。我在这个例子中使用了change，所以在你离开现场之前你不会看到它发生。由于数组问题，我必须使用splice 让 Vue 注意到元素的变化。

Vue.component('time-range', {
  template: '#time-range',
  props: ['data']
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
  	addRange: function () {
    	this.ranges.push('')
    },
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container" id="app">
  <div class="row">
    Parent Val
    {{ ranges }}
  </div>
  
   <div class="row">
     <button 
        v-on:click="addRange"
        type="button" 
        class="btn btn-outline-secondary">Add time-range
     </button>
    </div>

  <time-range 
    v-for="range, index in ranges"
    :data="range"
    :key="index"
    @change.native="(event) => ranges.splice(index, 1, event.target.value)">
  </time-range>
</div>

<template id="time-range">
  <div class="row">
    <input :value="data" type="text">
  </div>
</template>

要使用the .sync modifier，子组件必须发出update:variablename 事件，父组件将捕获并发挥其魔力。在这种情况下，变量名是data。您仍然必须使用数组下标表示法，因为您仍然无法修改 v-for 别名变量，但是 Vue 对数组元素上的.sync 很聪明，所以没有乱七八糟的splice。

Vue.component('time-range', {
  template: '#time-range',
  props: ['data'],
  methods: {
    emitUpdate(event) {
      this.$emit('update:data', event.target.value);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    ranges: [],
  },
  methods: {
  	addRange: function () {
    	this.ranges.push('')
    },
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container" id="app">
  <div class="row">
    Parent Val
    {{ ranges }}
  </div>
  
   <div class="row">
     <button 
        v-on:click="addRange"
        type="button" 
        class="btn btn-outline-secondary">Add time-range
     </button>
    </div>

  <time-range 
    v-for="range, index in ranges"
    :data.sync="ranges[index]"
    :key="index">
  </time-range>

</div>

<template id="time-range">
  <div class="row">
    <input :value="data" type="text" @change="emitUpdate">
  </div>
</template>