значение перехвата при возникновении события из дочернего компонента в родительском компоненте

У меня есть компонент 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
person Ciasto piekarz    schedule 23.12.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

this.$on будет прослушивать события, генерируемые одним и тем же компонентом. Чтобы прослушивать события, генерируемые дочерним компонентом, вы должны назначить прослушиватель событий дочернему компоненту в разделе шаблона родительского компонента. Итак, в разделе шаблонов form-preview.vue у вас должно быть что-то вроде этого ..

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

Затем в разделе сценария родительского компонента вы можете определить свой handleChange обработчик событий.

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

Обратите внимание, что обработчик событий автоматически получит все данные, отправленные с событием. Если вы хотите сделать это явным, вы можете использовать @change="handleChange($event)"

person Husam Ibrahim    schedule 23.12.2018
comment
спасибо, я делал это в последние несколько месяцев назад, теперь я могу вспомнить, я делал это немного по-другому в моем офисе - person Ciasto piekarz; 23.12.2018
comment
@Ciastopiekarz Рад, что смог помочь. - person Husam Ibrahim; 23.12.2018