Создание событий, emit в Vue

Через props мы можем передать данные от родительского компонента в дочерний. Но что если мы хотим также передавать данные и в обратном направлении, от дочернего компонента к родителю? В этом случае необходимо определить свои события.

Общая схема создания и вызова кастомного события выглядит следующим образом. Родительский компонент устанавливает у дочернего компонента атрибут v-on:название_события:

App.vue

myevent это название события, которые мы сами определяем и которое будет отлавливать родительский компонент. action это метод, который будут вызываться при возникновении события myevent.

App.vue<script>
import User from './components/User.vue'
export default {
  data() {
    return {
      name: 'john'
    }
  },
  components: {
    User
  },
  methods: {
    action: function () {
      this.name = 'bob';
    }
  }
}
</script>
<template>
  <User v-on:myevent="action" />
  <p>{{ name }}</p>
</template>

components/User.vue<script>
export default {
  methods: {
    event: function () {
      this.$emit('myevent', 'bob');
    }
  }
}
</script>
<template>
  <button v-on:click="event">text</button>
</template>

Передача параметров

$emit может передавать значения. Это очень часто используется для передачи новых значений или каких-то данных.

App.vue<script>
import User from './components/User.vue'
export default {
  data() {
    return {
      name: 'john'
    }
  },
  components: {
    User
  },
  methods: {
    action: function (params) {
      this.name = params;
    }
  }
}
</script>
<template>
  <User v-on:myevent="action" />
  <p>{{ name }}</p>
</template>

components/User.vue<script>
export default {
  methods: {
    event: function () {
      this.$emit('myevent', 'bob');
    }
  }
}
</script>
<template>
  <button v-on:click="event">text</button>
</template>