Передача аргументов и модификаторов

Vue.js предоставляет гибкий механизм передачи данных и управления поведением компонентов через аргументы (props) и модификаторы событий, что позволяет строить мощные и переиспользуемые интерфейсы.

Аргументы (Props)

Props — это способ передачи данных от родительского компонента к дочернему. Они обеспечивают одностороннюю связь данных: дочерний компонент получает значения, но не изменяет их напрямую, что сохраняет предсказуемость состояния приложения.

Объявление props

Props можно объявлять в компоненте несколькими способами:

export default {
  props: ['title', 'count']
}

Или через объект для более детальной настройки:

export default {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    },
    isVisible: Boolean
  }
}

Ключевые моменты:

type — указывает ожидаемый тип данных.
required — делает проп обязательным для передачи.
default — задаёт значение по умолчанию.
Vue автоматически выводит предупреждение, если тип переданного значения не совпадает с объявленным.

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

Props используются внутри шаблона компонента через привязку:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Количество: {{ count }}</p>
    <p v-if="isVisible">Видимый элемент</p>
  </div>
</template>

В родительском компоненте передача осуществляется через атрибуты:

<ChildComponent title="Пример" :count="5" :is-visible="true" />

Важно: для передачи чисел, булевых значений или выражений нужно использовать двоеточие :, чтобы Vue интерпретировал значение как JavaScript, а не как строку.

Передача аргументов через события

Для обратной передачи данных от дочернего компонента к родителю используется механизм custom events. Дочерний компонент эмиттирует событие с аргументами:

export default {
  methods: {
    notifyParent() {
      this.$emit('update', { value: 42 })
    }
  }
}

В родителе можно обработать событие и принять данные:

<ChildComponent @update="handleUpdate" />

methods: {
  handleUpdate(payload) {
    console.log(payload.value) // 42
  }
}

Аргументы событий позволяют передавать любые данные: числа, строки, объекты, массивы. Это делает компоненты универсальными и гибкими.

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

Vue поддерживает модификаторы событий, которые упрощают обработку пользовательских действий и убирают необходимость писать вспомогательные функции.

Основные модификаторы

.stop — вызывает event.stopPropagation()
.prevent — вызывает event.preventDefault()
.capture — добавляет слушатель на фазу захвата
.self — срабатывает только если событие произошло на элементе, на котором слушатель установлен
.once — обработчик вызывается один раз
.passive — сообщает браузеру, что обработчик не вызывает preventDefault()

<button @click.stop.prevent="handleClick">Клик</button>

Модификаторы клавиш

Модификаторы клавиш позволяют реагировать только на определённые клавиши:

<input @keyup.enter="submitForm" />
<input @keydown.ctrl.enter="sendMessage" />

Поддерживаются стандартные имена клавиш (enter, tab, esc, space, arrow-up и другие) и возможность кастомизации через числовые keyCode.

Комбинирование аргументов и модификаторов

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

<input
  :value="searchQuery"
  @input="updateQuery($event.target.value)"
  @keyup.enter.prevent="submitSearch"
/>

Здесь:

:value — передаёт аргумент в input.
@input — синхронизирует значение с родителем.
@keyup.enter.prevent — предотвращает стандартное поведение Enter и запускает функцию отправки запроса.

Динамические аргументы

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

<component
  :is="currentComponent"
  v-bind="[dynamicProps]"
  v-on="[dynamicEvents]"
/>

v-bind="[dynamicProps]" — привязывает набор пропсов из объекта.
v-on="[dynamicEvents]" — навешивает события из объекта.

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