Vuejs:如何将对象作为道具传递并让组件更新子对象 [英] Vuejs : How to pass an object as prop and have the component update sub-objects

问题描述

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

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

Vue.component('child', {模板:'#child'，//孩子有一个名为'value'的道具.v-model 会自动绑定到这个 prop道具:['价值']，方法: {更新值:函数(值){//不确定两个字段是否应该调用返回完整对象的相同updateValue方法，或者它们是否应该分开this.$emit('input', value);}}});新的 Vue({el: '#app',数据: {父对象:{value1:第一个值"，value2:第二个值"}}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script><div id="应用程序"><p>父值:{{parentObject}}</p><child v-model="parentObject"></child>

<模板 id="子"><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>

解决方案

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

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

Vue.component('child', {模板:'#child'，道具:['价值']，数据() {返回 { val: {...this.value} };},手表: {价值:{深:真实，处理程序(值){this.$emit('input', value);}}}});新的 Vue({el: '#app',数据: {父对象:{value1:第一个值"，value2:第二个值"}}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script><div id="应用程序"><p>父值:{{parentObject}}</p><child v-model="parentObject"></child>

<模板 id="子"><div><input type="text" v-model="val.value1"><input type="text" v-model="val.value2">

</template>

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

I am trying to create a component that accepts an object as prop and can modify different properties of that object and return the value to the parent, using either sync or emit events. The example won't work, but it's simply to demonstrate what I'm trying to achieve.

Here's a snippet of what I'm trying to achieve :

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>

解决方案

You shouldn't modify the object being passed in as a prop. Instead, you should create a new data property in the child component and initialize it with a copy of the prop object.

Then, I would just use a v-model for each of the inputs in the child component and add a deep watcher to the internal value which would emit an update whenever the internal value changes.

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>

I made a shallow copy of the prop in my example ({...this.value}), because the object doesn't have any nested properties. If that wasn't the case, you might need to do a deep copy (JSON.parse(JSON.stringify(this.value))).

这篇关于Vuejs:如何将对象作为道具传递并让组件更新子对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！