Vuejs：如何将对象作为道具传递并让组件更新子对象

Question

我正在尝试创建一个组件，该组件接受一个对象作为道具，并且可以修改该对象的不同属性并将值返回给父级，使用同步或发出事件。该示例不起作用，但它只是为了演示我想要实现的目标。

这是我正在努力实现的目标：

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      //Not sure if both fields should call the same updateValue method that returns the complete object, or if they should be separate
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentObject: {value1: "1st Value", value2: "2nd value"}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentObject}}</p>
  <child v-model="parentObject"></child>
</div>

<template id="child">
   <input type="text" v-bind:value.value1="value" v-on:input="updateValue($event.target.value)">
   <input type="text" v-bind:value.value2="value" v-on:input="updateValue($event.target.value)">
</template>

Answer 1

您不应该修改作为道具传入的对象。相反，您应该在子组件中创建一个新的数据属性，并使用 prop 对象的副本对其进行初始化。

然后，我将为子组件中的每个输入使用v-model，并为内部值添加一个深度观察器，当内部值发生变化时，它会发出update。

Vue.component('child', {
  template: '#child',
  props: ['value'],
  data() {
    return { val: {...this.value} };
  },
  watch: {
    val: {
      deep: true,
      handler(value) {
        this.$emit('input', value);
      }
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentObject: {value1: "1st Value", value2: "2nd value"}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <p>Parent value: {{parentObject}}</p>
  <child v-model="parentObject"></child>
</div>

<template id="child">
  <div>
    <input type="text" v-model="val.value1">
    <input type="text" v-model="val.value2">
  </div>
</template>

我在示例 ({...this.value}) 中制作了道具的浅表副本，因为该对象没有任何嵌套属性。如果不是这种情况，您可能需要进行深层复制 (JSON.parse(JSON.stringify(this.value)))。

Answer 2

在#app 中，应该是parentObject，而不是parentValue。

在 child 中，您有两个 inpyt，但您必须有一个根元素。在下面的示例中，我为组件创建了一个 <div> 根元素。

要更新父级，请发出事件。这种方法不会修改父级在子级中的属性，因此不会破坏单向数据流。

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value']
});

new Vue({
  el: '#app',
  data: {
    parentObject: {value1: "1st Value", value2: "2nd value"}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentObject}}</p>
  <child v-model="parentObject"></child>
</div>

<template id="child">
<div>
   <input type="text" v-bind:value="value.value1" v-on:input="$emit('input', {value1: $event.target.value, value2: value.value2})">
   <input type="text" v-bind:value="value.value2" v-on:input="$emit('input', {value1: value.value1, value2: $event.target.value})">
</div>
</template>

关于<input>s：您可以将每个绑定到父value 的属性。然后，在编辑时，发出一个仅修改该属性 (v-on:input="$emit('input', {value1: $event.target.value, value2: value.value2})) 并保留另一个值的事件。父级随之更新。

如果属性比较多，可以在第二个input中替换，例如：

$emit('input', {value1: value.value1, value2: $event.target.value})

有

$emit('input', Object.assign({}, value, {value2: $event.target.value}))

使用方法而不是直接从模板发出

我保留了之前的演示，因为它更直接且更易于理解（对原始代码的更改更少），但更紧凑的方法是使用方法（例如updateValue）并在模板中重用它：

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function(propertyName, propertyValue) {
      this.$emit('input', Object.assign({}, this.value, {[propertyName]: propertyValue}))
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentObject: {value1: "1st Value", value2: "2nd value"}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentObject}}</p>
  <child v-model="parentObject"></child>
</div>

<template id="child">
<div>
  <input type="text" v-bind:value="value.value1" v-on:input="updateValue('value1', $event.target.value)">
  <input type="text" v-bind:value="value.value2" v-on:input="updateValue('value2', $event.target.value)">
</div>
</template>

如您所见，上面的演示已经使用了Object.assign()，这意味着它将处理无限数量的属性。

Answer 3

这是不可能的。有一个封闭的issue 要求它。这是我找到的最短的方法：

脚本

Vue.component('child', {
  template: `
    <div>
        <input :value="parent.foo" @change="$emit('update:parent', $event.target.value)" />
    </div>
  `,
  props: {
    parent: {
      type: Object
    }
  }
})

new Vue({
  el: '#app',
  data: () =>  ({
    parent: {foo: 'a', bar: 'b'}
  }),

  methods: {
    mutate (value) {
        this.parent.foo = value
    }
   }
})

模板

<div id="app">
  {{parent}}
  <child :parent="parent" @update:parent="mutate"></child>
</div>

https://jsfiddle.net/5k4ptmqg/475/

Answer 4

<TradeTableItem v-for="(debtReserve, index) in debtReserves" :key="debtReserve.id" :debtReserve="debtReserve" :market="market" :id="'order_by_' + index"></TradeTableItem>

在上面的步骤中，我们为每一行生成了 id。

在 TradeTableItem（我们正在填充的模板，表格行）中，将 id 写为 :id="this.id" 其中 this.id 是 props 的一部分。

希望对你有帮助

Answer 5

不使用props 的另一种方法是访问子组件中的组件属性$attrs。

在父母中

<child v-model="parentObject" />

而在child中，v-model生成的value属性可以在模板中访问为

$attrs.value.value1

这是反应式的。

演示HERE