vm.$emit( eventName, […args] )

Аргументы:

  • {string} eventName

  • [...args]

Порождает событие в текущем экземпляре. Все дополнительно указанные параметры будут переданы в коллбэк подписки.

Примеры:

Использование $emit только с именем события:

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Нажмите для приветствия
    </button>
  `
})
<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Привет!')
    }
  }
})

Использование $emit с дополнительными аргументами:

Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Да', 'Нет', 'Может быть']
    }
  },
  methods: {
    giveAdvice: function () {
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Делать или нет?
    </button>
  `
})
<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>
new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

Last updated