event управление событиями

В библиотеке Quasar управление событиями является одной из ключевых частей работы с компонентами и пользовательским интерфейсом. События позволяют связывать действия пользователя с логикой приложения, обеспечивая интерактивность и реактивность. Quasar строится поверх Vue.js, поэтому большинство механизмов событий наследуются от Vue, но библиотека добавляет свои удобные утилиты и особенности для упрощения работы.

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

Компоненты Quasar активно используют систему событий для взаимодействия. Пример стандартного подхода:

<q-btn label="Нажми меня" @click="handleClick" />
export default {
  methods: {
    handleClick(evt) {
      console.log('Кнопка нажата', evt);
    }
  }
}

Ключевой момент: @click — это сокращение для v-on:click, и оно работает с любыми событиями DOM и пользовательскими событиями компонентов Quasar.

Пользовательские события

Quasar позволяет создавать собственные события внутри компонентов. Например:

<template>
  <q-input v-model="text" @input="emitChange" />
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    emitChange(value) {
      this.$emit('text-changed', value)
    }
  }
}
</script>

Здесь компонент будет эмитировать событие text-changed каждый раз при изменении текста. В родительском компоненте можно подписаться на него:

<custom-input @text-changed="onTextChanged" />

Модификаторы событий

Quasar поддерживает Vue-модификаторы, упрощающие управление поведением событий:

  • .stop — предотвращает всплытие события
  • .prevent — предотвращает стандартное действие браузера
  • .capture — обработка события на фазе захвата
  • .self — срабатывание только если событие пришло от самого элемента

Пример:

<q-btn label="Отменить действие" @click.stop.prevent="cancelAction" />

Глобальные события и Event Bus

Для передачи событий между несвязанными компонентами удобно использовать глобальный Event Bus:

import { reactive } from 'vue'

export const EventBus = reactive({})

EventBus.emit = function(event, payload) {
  if (!this[event]) this[event] = []
  this[event].forEach(cb => cb(payload))
}

EventBus.on = function(event, callback) {
  if (!this[event]) this[event] = []
  this[event].push(callback)
}

Использование:

EventBus.on('user-logged-in', user => console.log('Пользователь вошёл', user))
EventBus.emit('user-logged-in', { name: 'Ivan' })

Управление событиями на DOM-уровне

Quasar компоненты часто оборачивают базовые элементы DOM. Можно использовать стандартные методы добавления событий:

mounted() {
  this.$refs.myDiv.addEventListener('mouseover', this.onHover)
},
methods: {
  onHover(evt) {
    console.log('Наведение мыши на элемент', evt)
  }
}

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

beforeUnmount() {
  this.$refs.myDiv.removeEventListener('mouseover', this.onHover)
}

Специфические события Quasar-компонентов

  1. QDialog

    • @hide — диалог скрыт
    • @show — диалог отображён

  2. QMenu

    • @before-show — до открытия меню
    • @before-hide — до закрытия меню

  3. QTable

    • @request — запрос данных (пагинация, сортировка, фильтры)
    • @row-click — клик по строке

  4. QInput

    • @update:model-value — обновление значения
    • @focus и @blur — управление фокусом

Эти события позволяют тонко управлять поведением компонентов без необходимости модифицировать их внутреннюю логику.

Декларативные события через QListeners

Quasar предоставляет директиву v-on в более декларативной форме с автоматической привязкой событий:

<q-btn v-on="{ click: handleClick, mouseenter: handleHover }" label="Действие" />

Это полезно для компонентов, где требуется сразу несколько обработчиков на одном элементе.

Совмещение реактивности и событий

Часто события используются вместе с реактивными свойствами Vue:

<q-checkbox v-model="isChecked" @update:model-value="onCheckChange" />

data() {
  return { isChecked: false }
},
methods: {
  onCheckChange(value) {
    console.log('Состояние чекбокса:', value)
  }
}

Такой подход позволяет синхронизировать UI и бизнес-логику без лишнего кода.

Использование .native для обертки Quasar-компонентов

Иногда требуется слушать чистые DOM-события у компонентов, которые сами эмитируют кастомные события. Для этого используется модификатор .native:

<q-btn @click.native="nativeClick" label="Нативный клик" />

Этот приём помогает работать с событиями, которые Quasar не прокидывает напрямую.

Рекомендации по организации событий

  • Использовать кастомные события для общения дочерних и родительских компонентов
  • Применять Event Bus для глобальных событий, особенно если компоненты не связаны напрямую
  • Для повторно используемых компонентов внедрять декларативные события через v-on или объектные биндинги
  • Использовать модификаторы .stop, .prevent, .self для управления всплытием и стандартным поведением

Эффективное управление событиями позволяет создавать гибкий, реактивный интерфейс, где компоненты Quasar взаимодействуют друг с другом без излишней связности и дублирования кода.

Оглавление