如何在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';
    },
  },
});

但是，根据docs，最好将kebab-case用于事件名称。