Во Vue.js версии 3 пользовательские события прослушиваются с помощью директивы v-on или сокращенной формы @.
Для прослушивания пользовательского события необходимо добавить соответствующий обработчик события в элемент или компонент. Обработчик задается с помощью выражения или функции внутри директивы v-on или @, аргументом которой является имя события:
<template>
<div>
<button @click="handleClick">Нажми меня</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Событие клика было прослушано');
}
}
};
</script>
В этом примере мы имеем кнопку, которая прослушивает событие click с помощью @click и вызывает метод handleClick при каждом клике на нее. Внутри метода handleClick мы можем выполнять любые действия, которые требуются в ответ на это событие.
Если вы хотите передать данные обработчику события, вы можете использовать изменяемые свойства или параметры внутри шаблона:
<template>
<div>
<input v-model="message" />
<button @click="handleClick(message)">Отправить</button>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
methods: {
handleClick(message) {
console.log('Сообщение:', message);
}
}
};
</script>
В этом примере мы имеем текстовое поле, связанное с данными message, и кнопку, которая прослушивает событие click. При клике на кнопку вызывается метод handleClick, которому передается значение message. Мы можем использовать это значение внутри метода для выполнения нужных нам действий.
Также важно отметить, что в Vue.js 3 обработчик события также может быть присвоен напрямую в декларативной части шаблона:
<template>
<div>
<button @click="() => { count += 1 }">Увеличить счетчик</button>
<p>Счетчик: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
}
};
</script>
В этом примере мы присваиваем анонимную функцию прямо в директиву @click, которая увеличивает значение count при каждом клике на кнопку.
Таким образом, в Vue.js 3 прослушивание пользовательских событий осуществляется с помощью директивы v-on или сокращенной формы @, и можно использовать аргументы события для передачи данных обработчику события.