将数据从子组件传输到父组件答案

【问题标题】：Transfer data from child component to parent component将数据从子组件传输到父组件
【发布时间】：2018-08-07 18:45:12
【问题描述】：

我有一个表单（父）组件，其中包含两个输入文本字段和日期字段，其中使用了 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"

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

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

我要尝试的第一件事是更改这两行，这样您就不会更改绑定的模型值：

var payload=this.data.toISOString().substr(0,10)
this.$emit('wybrano', payload)

【讨论】：

我改了，但问题依然存在。当我将“方法”替换为“计算”时，问题就消失了。之后还有另一个问题。我在控制台中收到警告“事件“选定”的无效处理程序：未定义'。我认为这是因为事件只能由方法提供服务。请帮忙

【解决方案2】：

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

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

文档：Using v-model on Components

/// 表单组件

...
<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'],
...

【讨论】：

【解决方案3】：

也许改变这一行就足够了：

this.$emit('wybrano', this.data)

像这样：

this.$nextTick(this.$emit('wybrano', this.data))

【讨论】：

我猜它也会起作用，但是，IMO，它也会使这段代码更复杂，更难理解。 $nextTick 在这里，看起来像一个 Hack
并非如此。 OP 的问题/问题与他的代码库可读性无关。他并没有要求我们帮助他使他的代码更具可读性。由他来学习如何以更具声明性的方式进行编码。所以，我的回答尽量简单，直指他的问题的核心：当你直接改变 DOM 时，你应该知道 nextTick 方法并使用它。

【解决方案4】：

这个问题是由于 selected 事件在 data 属性更新之前传播（从而导致先前选择的值被发出）。 p>

为了确保在更新后传播所选日期，您可以改为使用watcher 方法来观察数据属性的更改。

然后，在 watcher 方法中，您将像已经完成的那样发出您的事件。

因此，在 ///Calendar 组件中，您将拥有类似这样的内容，其中删除了 @selected：

<datepicker v-model="data" name="data" :format="ff" :monday- 
  first="mondayFirst" :clear-button="clearButton" :calendar- 
  button="calendarButton"></datepicker>
///
 methods: {
   ...
   watch: {
     'data' () {
       this.$emit('wybrano', this.data.toISOString().substr(0,10))
     }
   }

然后，我建议您使用有意义的函数、变量名，以简化代码的可读性和维护。

例如，您可以将 Calendar data 重命名为 someDate（有些需要澄清）。 wybrano 事件命名将重命名为 *someDateUpdated。 zm 函数名也不清楚。

【讨论】：