输入值不重置 - vuejs

Question

我正在使用一个 2 级输入字段组件。我想在父组件中单击按钮时重置。我试图将数据传递到基本初始输入字段，然后发送回父级。我的问题是，当我尝试重置按钮上的数据时，单击父组件中的值它不起作用。数据未设置为 null，值仍为 123。我在下面的代码中做错了什么。任何帮助，将不胜感激。基本输入<template>  <input    v-model="myValue"    type="number"    inputmode="numeric"    @input="$emit( 'input', $event.target.value )"  /></template><script>  export default {    data () {      return {        myValue: undefined      };    }  } };</script>01级<template>  <div class="c-floating-label">    <input-number @input="passValue" />  </div></template><script>  import InputNumber from '../../atoms/form-controls/BaseInput';  export default {    components: {      InputNumber    }    methods: {      passValue: function (value) {        this.$emit('input', value);      }    }  };</script>主要部件<div>  <level-01     :required="true"    :v-model="datax.cardNumber"    value="datax.cardNumber"   /> <button @click="reset">click me</button></div><script>   data () {      return {        datax: {          cardNumber: undefined        }      };    },   created() {      this.datax.cardNumber = 123;    },    methods: {      reset () {        this.datax.cardNumber = null;      },</script>

Answer 1

您错过了 MainComponent 上的绑定

<level-01 

  :required="true"

  :v-model="datax.cardNumber"

  :value="datax.cardNumber"

 />

注意：value =“datax.cardNumber”是正确的其次，在level-01中你没有绑定value prop（根本没有定义）

<template>

  <div class="c-floating-label">

    <input-number @input="passValue" :value="$attrs.value"/>

  </div>

</template>

<script>

  import InputNumber from '../../atoms/form-controls/BaseInput';

  export default {

    components: {

      InputNumber

    },

    methods: {

      passValue: function (value) {

        this.$emit('input', value);

      }

    }

  };

</script>

最后是 BaseComponent：

<template>

  <input

    :value="$attrs.value"

    type="number"

    inputmode="numeric"

    @input="$emit( 'input', $event )"

  />

</template>

<script>

  export default {

    data () {

      return {

        // myValue: undefined

      };

    }

  }

 };

</script>