Как передавать дополнительные аргументы в $emit события?

В Vue.js, метод $emit используется для генерации пользовательских событий, которые могут быть прослушаны в родительских компонентах. Чтобы передать дополнительные аргументы события, можно использовать следующие подходы:

1. Через второй аргумент $emit: Обычно, $emit принимает два аргумента - название события и его дополнительные данные. Это позволяет передать любые данные вместе с событием. Например:

// Внутри компонента
this.$emit('my-event', arg1, arg2, ...);

<!-- В родительском компоненте -->
<child-component @my-event="handleEvent"></child-component>

2. Через объект события: Если необходимо передать несколько аргументов, можно использовать объект события. В этом случае, вторым аргументом event.detail будет объект с передаваемыми данными. Например:

// Внутри компонента
this.$emit('my-event', { arg1, arg2 });

<!-- В родительском компоненте -->
<child-component @my-event="handleEvent"></child-component>

// В родительском компоненте
methods: {
  handleEvent(event) {
    console.log(event.detail.arg1, event.detail.arg2);
  }
}

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

// Внутри компонента
this.$emit('my-event', arg1, arg2);

<!-- В родительском компоненте -->
<child-component @my-event="handleEvent($event, arg1, arg2)"></child-component>

// В родительском компоненте
methods: {
  handleEvent(event, arg1, arg2) {
    console.log(arg1, arg2);
  }
}

Используя любой из этих подходов, вы сможете передавать и обрабатывать дополнительные аргументы в $emit событиях в Vue.js.