vue.js - Vuejs : How to pass an object as prop and have the component update sub-objects

Question

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

这是我想要实现的目标的片段:

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 传入的对象。相反，您应该在子组件中创建一个新的数据属性，并使用 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}) 中制作了一个 prop 的浅拷贝，因为该对象没有任何嵌套属性。如果不是这种情况，您可能需要进行深层复制 (JSON.parse(JSON.stringify(this.value)))。