时间戳

首页 > 解决方案 > Vue：组件中的输入表单不返回值

javascript - Vue：组件中的输入表单不返回值

问题描述

我在带有输入字段的“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 以外的形式返回输入值。错误在哪里？

标签： javascriptvue.jsvuejs2vue-component

解决方案

您刚刚将值从父组件绑定到子组件。

vuedataday当您将方法绑定为事件的回调时，您几乎在那里，changedataday该函数正在接收事件传递的值。

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

另一种进行双向绑定的方法是使用v-model.

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

而在孩子

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

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

推荐阅读