时间戳

首页 > 解决方案 > 将数据从子组件传输到父组件

javascript - 将数据从子组件传输到父组件

问题描述

我有一个表单（父）组件，其中包含两个输入文本字段和使用 vuejs-datepicker 组件的日期字段（子组件。见下文：

表单组件

<template>
<div>
    <form>
        Name<input type="text" v-model="name"/><br>
        Age <input type="text" v-model="age"/><br>
        <calendar2 @wybrano="zm($event)"></calendar2>
        <button type="button" @click="sendfo()">Wyslij</button>
    </form>
</div>
</template>

<script>
export default {

    data() {
        return {
            name:"",
            age:"",  
            da:""
        }
    },
    created() {


    },
    methods: {
        zm: function(ev) {
            this.da=ev
        },

        sendfo: function() {
            var t = this
            axios({
                method:"POST",
                url: "sendfo",
                data: {
                    name:"messi",
                    age:32,
                    data:t.da

                },
            }).then(function(response) {
                console.log('done');
            })



        }

    }
}
</script>

日历组件

<template>
<div>
<datepicker v-model="data" name="data" :format="ff" :monday- 
first="mondayFirst" :clear-button="clearButton" :calendar- 
button="calendarButton" @selected="sel"></datepicker>
</div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';
 export default {
components: {
  Datepicker
},
created() {


},


data() {
  return {
    data: "",
    mondayFirst: true,
    clearButton: true,
    calendarButton: true,
  }
},
methods: {
  sel: function() {
    if(this.data){
    this.data=this.data.toISOString().substr(0,10)
    this.$emit('wybrano', this.data)
    }
    },


    }
  }
</script>

我的目的是使用表单组件来收集表单数据并通过 ajax 将它们发送到数据库。正如您在我$emit用来将数据从日历组件传输到父组件的代码中看到的那样。一切正常，但是......日历组件中选择的（由用户）日期与传输到父组件的日期不同。我举几个例子；

date selected in calendar 07/08/2018 -> var data="07/08/2018" -> var da=""
date selected in calendar 09/12/2018 -> var data="09/12/2018" -> var da="07/08/2018"
date selected in calendar 01/01/2018 -> var data="01/01/2018" -> var da="09/12/2018"

我希望我的问题是可以理解的。每次da父组件中的 var 从先前的选择中获取值。请帮我解决问题。

标签： javascriptvuejs2

解决方案

您可以尝试v-model在日历组件上使用。

使用这种方法，VueJS 可能会对日期的选择产生良好的反应。

文档：在组件上使用 v-model

/// 表单组件

...
<calendar2 v-model="da" />
...

/// 日历组件

... in the template
<datepicker v-model="value" input="$emit('input', $event.target.value.toISOString().substr(0,10))" ... />
...

... in the script
data() { /* datepicker configuration */ },
props: ['value'],
...

推荐阅读