在父组件中增加子组件时如何更新子组件？

Question

问题：每当我增加子组件提供的输入字段时，该值都不会设置回零。它采用先前实例的值。

注意：增量是在父组件方法中实现

子组件

<input type="number" placeholder="Amount" :value="value"  @input="$emit('input',$event.target.value/>

<script>
export default {
  props: ["value"],
  data() {
    return {};
  }
};
</script>

父组件

<template>
   <div>

<form-input v-for="n in count" :key="n" v-model="expense"> </form-input>

   <button @click="addInputs">Add Expense</button>

   <button @click="deleteInputs">Delete</button>


   </div>
</template>

export default {
  components: {
    "form-input": formInput
  },
  name: "form",
  data() {
    return {
      count: 0,
      earnings: "",
      expense: ""
    };
  },
  methods: {
    addInputs: function() {
      this.count++;

    },
    deleteInputs: function() {
      this.count--;
    }
  }
};
</script>

如果有更多需要的信息，请随时提问

Answer 1

您为什么仍然要从父母那里传递价值支持？孩子的价值不应该自我控制吗？

尝试删除值的绑定。

<input type="number" placeholder="Amount" @input="$emit('input',$event.target.value/>`