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

Question

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

这是我要实现的目标的摘要：

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

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

然后，我将对v-model子组件中的每个输入使用a ，并向内部值添加一个深度监视程序，该值将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))）。