javascript - Vue : Input Form in a component doesn't return a value

Question

我的“ecedata”组件中有一个带有输入字段的代码:

<template>
    <div class="col-l-4">
        <p style="text-align: center">Data/day (GB)</p>
        <div class="form-input-set" style="background: white">
            <input v-bind:value="dataday" v-on:change="$emit('changedataday', $event.target.value)" type="number" class="form-input">
        </div>
    </div>
</template>

<script>
export default {
    name:"ecedata" ,
    props: {
        dataday:Number,
    },
    data () {
      return {

      }
    },

}
</script>

我正在调用主 app.vue 中的组件:

<template>
    <ecedata v-bind:dataday="dataday" v-on:changedataday="vuedataday" ></ecedata>
</template>

<script>
  import ecedata from '@/components/ece/data/ecedata.vue'

  export default {
    name: 'app',
    components: {
      ecedata,
    },
    data () {
      return {
          dataday:0,
      }
    },
    methods: {
      vuedataday() {
        alert(this.dataday)
      }
    },

  };

</script>

但它不会以 0 以外的形式返回输入值。 错误在哪里？

Answer 1

您刚刚将父组件的值绑定(bind)到子组件。

当您将 vuedataday 方法绑定(bind)为 changedataday 事件的回调时，您几乎就到了，此函数正在接收事件传递的值。

vuedataday(newDataday) {
    this.dataday = newDataday;
}

进行双向绑定(bind)的另一种方法是使用v-model。

<ecedata v-model="dataday"></ecedata>

还有 child

<input v-bind:value="dataday" v-on:change="$emit('input', $event.target.value)" type="number" class="form-input">

https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components