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

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

为什么你要从父级传递一个 value prop？ child 的值(value)不应该是 self 控制吗？

尝试删除值的绑定(bind)。

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