Событие компонента vuejs с: не работает

Question

У меня есть компонент vuejs, внутри одного метода моих компонентов, я отправляю событие как это:

this.$emit('user:registerd', [user])

На родителя я пытаюсь захватить его используя

<user v-on:user:registered="showSuccess"> </user>

Но вышесказанное никогда не работает showSuccess метод. Если я пропущу : часть от emit и v-on все работает просто отлично. Я думал, что можно было использовать : как-то использовать его в компонентах.

Кто-нибудь знает, почему это не работает?

Answer 1

Если вы излучаете:

this.$emit('user:registerd', [user])

Слушать:

<user v-on:user:registerd="showSuccess"> </user>

OTOH, если вы хотите слушать:

<user v-on:user:registered="showSuccess"> </user>

Вы должны излучать как:

this.$emit('user:registered', [user])

Просто помните, что вы отправляете массив из одного элемента в функцию-обработчик.

Небольшая демонстрация:

Vue.component('child', {
  template: `<button @click="$emit('user:registered', [123])">CLICK ME TO EMIT EVENT</button>`
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
   showSuccess(e) {
      this.message = 'Success. Received: ' + JSON.stringify(e);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <child @user:registered="showSuccess"></child>
</div>