Пользовательские события для компонентов

  • 4 мин

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

Регистрация событий

При создании компонента регистрируются все события, которые могут выдаваться компонентом путем их перечисления в поле emits в script:

<!-- inside the component's vue file -->
<script>
export default {
    name: 'Demo',
    emits: ['userUpdated']
}
</script>

Выдача событий

Событие выдается с помощью функции $emit. Если необходимо создать событие, которое элемент управления HTML вызывает напрямую, можно выполнить эту операцию в строке. Обратите внимание, как можно создать событие userUpdated, зарегистрировав обработчик событий click для кнопки:

<!-- inside the component's vue file -->
<template>
    <button @click="$emit('userUpdated')">Save user</button>
</template>

Примечание.

Вы используете ярлык @click, который обычно используется для подключения обработчиков событий в Vue.

Иногда может потребоваться выполнить дополнительные действия, прежде чем будет выдаваться событие. Если компоненту необходимо сохранить значение в базе данных перед возвратом любой обновленной информации, можно добавить метод. Внутри метода можно использовать this.$emit для вызова события, как вы делали раньше:

<!-- inside the component's vue file -->
<template>
    <button @click="saveUser">Save user</button>
</template>
<script>
export default {
    name: 'UserDialog',
    emits: ['userUpdated'],
    methods: {
        saveUser() {
            // perform other operations
            this.$emit('userUpdated'); // emits event
        }
    }
}
</script>

Выдача событий с данными

Компоненту может потребоваться вернуть данные родительскому объекту через события. Вы можете возвращать любые данные, передав другие параметры $emitв . Если вы хотите указать, что обновление прошло успешно, вернув true, можно обновить вызов следующим образом:

<button @click="$emit('userUpdated', true)">Save user</button>

Или можно использовать метод:

methods: {
    saveUser() {
        // perform other operations
        this.$emit('userUpdated', true); // emits event
    }
}

Прослушивание событий

Ожидание события, генерируемого компонентом, аналогично ожиданию событий, вызываемых обычными элементами управления HTML. Обычно в родительском компоненте создается метод, а затем метод подключается к событию с использованием того же синтаксиса @<event-name>, что и для @click или других событий. Если событие возвращает какие-то данные, оно будет передано в качестве параметров функции.

Чтобы добавить обработчик событий для события userUpdated, созданного ранее, можно использовать следующий код. Обратите внимание на то, как Vue.js преобразует имя из верблюжьего стиля в кебаб-стиль.

<template>
<user-dialog @user-updated="handleUserUpdated"></user-dialog>
</template>
<script>
import UserDialog from './UserDialog.vue';
export default {
    methods: {
        handleUserUpdated(success) {
            if (success) {
                alert('It worked!!');
            } else {
                alert('Something went wrong');
            }
        }
    },
    components: {
        UserDialog
    }
}