Как использовать пользовательские события в Vue JS 2. +

Question

Как правильно использовать пользовательское событие в vue js 2. +

<submitButton v-on:formsubmit="onFormSubmit"/>

В компоненте кнопки отправки я запускаю событие, подобное этому

this.$emit('formsubmit');

Answer 1

Кажется, хорошо для меня, может быть, проблема приходит откуда-то еще. Вы можете проверить скрипку, где я изменил, чтобы проверить пользовательское событие: https://jsfiddle.net/Mark_f/u06dmhfn/125/

Vue.component('surprise-app', {
  template: `<button @click="surprise">Surprise Me!</button>`,
  data() {
    return {
      surprise: '',
    };
  },
  methods: {
    surprise() {
      this.$emit('formsubmit')
    },
  },
})
new Vue({
  el: '#surpriseApp',
  data: {
    surpriseMessage: null,
  },
  methods: {
    surpriseMe() {
      this.surpriseMessage = 'you got surpried';
    },
  },
});

Однако, согласно документам , лучше использовать kebab-case для имен событий.