Сегодня я хочу рассказать о том, как в VUE3 можно отслеживать события и на основе этих данных выполнять определенные действия.
В качестве примера я рассмотрю часто встречающуюся задачу: удаление компонента на странице при нажатии на соответствующую кнопку.
В этом примере мы познакомимся с массивом, содержащим информацию о машинах. Массив включает такие ключи, как ID, НАЗВАНИЕ и другие. Сами значения отображаются с помощью предварительно подготовленного компонента.
JS-компонента:
<script setup lang="ts">
import { ref } from 'vue';
// Определение пропсов с значением по умолчанию для year
const props = withDefaults(
defineProps<{
nameCar: string;
year?: number;
}>(),
{
year: 2022,
}
);
const emit = defineEmits<{
(e: 'remove'): void; // Определяем событие 'remove'
}>();
const handleRemove = () => {
emit('remove'); // Вызываем событие удаления
};
</script>
Обратите внимание, тут я использовал синтаксис TS.
При объявлении пропсов данная конструкция указывает, что название машины обязательное, а год выпуска нет. Кроме того, 2022-й год задан по умолчанию.
HTML-часть (TEMPLATE)
<template>
<div class="border border-red-700 p-5">
<p>Машина: <b>{{ localNameCar }}</b></p>
<p>Год: {{ year }}</p>
</div>
<button @click="handleRemove" class="bg-red-400 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow">
Удалить элемент
</button>
</template>
Стили используются от Tailwind.
Теперь подробно разберемся с тем, как работает отслеживание событий в VUE 3 на реальной практике.
Для того чтобы начать следить за событиями, нам необходимо выполнить несколько шагов:
В дочернем компоненте мы должны объявить все события, за которыми будет следить родительский компонент. Это делается с помощью функции defineEmits. Например:
const emit = defineEmits<{
(e: 'remove'): void; // Определяем событие 'remove', которое не возвращает значение
}>();
В этом примере мы создали событие remove, а с помощью void указали, что это событие не будет возвращать никаких данных.
Далее, нам нужно создать функцию-обработчик, которая будет вызывать это событие. Например:
const handleRemove = () => {
emit('remove'); // Вызываем событие 'remove'
};
В данном случае функция handleRemove будет вызывать событие remove, когда она будет вызвана. Это сигнализирует родительскому компоненту о том, что должно произойти какое-то действие.
Теперь мы можем привязать этот обработчик к элементу интерфейса, например, к кнопке:
<button
@click="handleRemove"
class="bg-red-400 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow">
Удалить элемент
</button>
Теперь при клике на кнопку "Удалить элемент" будет вызвана функция handleRemove, и родительский компонент получит сигнал о том, что нужно запустить действие, связанное с событием remove.
На стороне родительского компонента мы должны создать функцию, которая будет вызываться при возникновении события. Например:
const removeCar = (id: number) => {
cars.value = cars.value.filter(car => car.id !== id); // Удаляем автомобиль по его идентификатору
};
Эта функция removeCar принимает идентификатор автомобиля и обновляет массив cars, удаляя из него автомобиль с указанным идентификатором.
Кроме того, на стороне родителя нам нужно подготовить массив данных. Мы можем получить его из API или же захардкодить. В моём случае полный код скрипта выглядит следующим образом.
<script setup lang="ts">
import { ref } from 'vue';
const cars = ref([
{
id: 1,
nameCar: 'BMW',
year: 2012
},
{
id: 2,
nameCar: 'Volvo',
year: 2020
},
{
id: 3,
nameCar: 'Lada',
},
{
id: 4,
nameCar: 'Porshe',
}
]);
const removeCar = (id: number) => {
cars.value = cars.value.filter(car => car.id !== id);
};
</script>
Поскольку мы будем динамически изменять массив, удаляя из него элементы, нам необходимо не просто объявить массив, а сделать его реактивным, как в примере выше. Для этого мы использовали ref.
Наконец, мы связываем событие с функцией в родительском компоненте следующим образом:
<TestComp
v-for="car in cars"
:key="car.id"
:nameCar="car.nameCar"
:year="car.year"
@remove="removeCar(car.id)" <!-- Привязываем событие remove к функции removeCar -->
/>
Теперь при возникновении события remove в дочернем компоненте будет вызвана функция removeCar, и соответствующий автомобиль будет удален из списка.
Следуя этим шагам, вы сможете эффективно управлять событиями между дочерними и родительскими компонентами в Vue 3. Это позволяет создавать более динамичные и отзывчивые интерфейсы, где компоненты могут взаимодействовать друг с другом через четко определенные события.