Испускание событий, директива emits в Vue

Данные движутся от родительских компонентов к дочерним. Давайте посмотрим теперь, как дочерние компоненты могут общаться с родительскими. Это делается с помощью испускания событий. Давайте посмотрим на практике.

Пусть в родительском компоненте есть некоторый метод:

App.vuemethods: {
    func() {
        alert('xxx');
    }
}

Передадим этот метод параметром в дочерний компонент:

App.vue<template>
    <User @show="func" />
</template>

Пропишем испускаемое событие в настройке emits:

components/User.vueexport default {
    emits: ['show'],
    data() {
        return {}
    }
}

Давайте теперь в дочернем компоненте сделаем кнопку, которая будет обрабатывать клик по ней:

components/User.vue<template>
    <button @click="handle">btn</button>
</template>

Сделаем обработчик клика, в обработчике клика заставим вызваться родительскую функцию. Для этого испустим событие с помощью функции $emit, ее параметром указав имя испускаемого события:

components/User.vuemethods: {
    handle() {
        this.$emit('show');
    }
}

Параметры событий

Можно передавать параметры в испускаемые события. Посмотрим на примере. Пусть функция родительского компонента принимает параметры:

App.vuemethods: {
    func(arg1, arg2) {
        console.log(arg1, arg2);
    }
}

Эти параметры нужно указывать параметрами функции $emit, после имени события:

components/User.vuemethods: {
    handle() {
        this.$emit('show', 'xxx', 'yyy');
    }
}

Испускание события в атрибуте

Можно испустить событие прямо в атрибуте обработчика:

components/User.vue<template>
    <button @click="$emit('show')">
        btn
    </button>
</template>

Можно при этом передать параметры:

components/User.vue<template>
    <button @click="$emit('show', 'xxx', 'yyy')">
        btn
    </button>
</template>