捕获父组件中子组件发出的事件的值答案

【问题标题】：catch value on event emit from child component in parent component捕获父组件中子组件发出的事件的值
【发布时间】：2019-05-22 22:47:15
【问题描述】：

我有一个组件 vue-datetimepicker

具有以下内容：

export default {
  name: 'vue-datetimepicker',
  data () {
    return {
      value: ''
    }
  },
  watch: {
    options: function (options) {
      // update options
      $(this.$el).datetimepicker({ data: options })
    }
  },
  mounted: function () {
    var vm = this
    var mycomp = $(this.$el).datetimepicker({})
    mycomp.on('dp.change', function (e) {
      vm.value = e.date
      vm.$emit('change', vm.value)
    })
  },
  destroyed: function () {
    $(this.$el).off().datetimepicker('destroy')
  }
}

从父组件form-preview.vue

我正在尝试捕捉它。

    created() {
        this.$on('change', function(id){
            console.log('Event from parent component emitted', id)
        });
    },
    mounted: function() {

    },

我期待当我更改日期时间时它应该发出更改事件。但是控制台中没有打印任何内容。

【问题讨论】：

标签： vue.js vuejs2 eonasdan-datetimepicker

【解决方案1】：

this.$on 将监听同一组件发出的事件。要侦听子组件发出的事件，您应该在父组件的模板部分中的子组件上分配一个事件侦听器。所以在form-preview.vue的模板部分你应该有这样的东西..

<vue-datetimepicker @change="handleChange" ... / >

然后在父组件的脚本部分中，您可以定义您的handleChange 事件处理程序..

methods: {
    handleChange(value) {
        console.log('Event from child component emitted', value)
    }
}

请注意，事件处理程序将自动接收随事件发出的任何数据。如果你想让它明确，你可以使用@change="handleChange($event)"

【讨论】：

谢谢，我在过去几个月里做过这个，现在我记得我在办公室做的方式略有不同
@Ciastopiekarz 很高兴我能帮上忙。