Declarative Event Binding

Vue 3 maintains the use of the v-on directive for attaching DOM event listeners. The shorthand syntax, utilizing the @ symbol, provides a concise way to handle interactions. Within the <script setup> composition model, event handlers are standard functions defined directly in the setup scope.

<template>
  <div>
    <button @click="incrementValue">Increase Count</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const counter = ref(0);

const incrementValue = () => {
  counter.value++;
};
</script>

Manual Event Management and Lifecycle Hooks

Situations may arise where direct DOM manipulation is required, necessitating manual event listener attachment. The Composition API provides onMounted and onUnmounted hooks to manage these listeners. Properly removing listeners during the unmount phase is essential to avoid memory leaks and orphaned event handlers.

import { ref, onMounted, onUnmounted } from 'vue';

const clickTracker = ref(0);

const logClick = () => {
  clickTracker.value += 1;
};

onMounted(() => {
  const actionButton = document.querySelector('#action-btn');
  if (actionButton) {
    actionButton.addEventListener('click', logClick);
  }
});

onUnmounted(() => {
  const actionButton = document.querySelector('#action-btn');
  if (actionButton) {
    actionButton.removeEventListener('click', logClick);
  }
});

Utilizing Event Modifiers

Vue offers modifiers to handle common DOM event patterns directly within the template. These postfixes, such as .prevent and .stop, abstract away explicit method calls like event.preventDefault() or event.stopPropagation(), resulting in cleaner logic.

<!-- Submits the form without reloading the page -->
<form @submit.prevent="processForm">
  <button type="submit">Send Data</button>
</form>

Custom Events for Child-to-Parent Communication

Components can communicate upwards to their parents via custom events. Using the defineEmits macro, a child component declares the events it intends to fire. This mechanism allows parents to listen for these specific events using the standard v-on syntax.

<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">Send Event</button>
</template>

<script setup>
const emit = defineEmits(['statusUpdate']);

const notifyParent = () => {
  const dataPayload = { timestamp: Date.now(), status: 'active' };
  emit('statusUpdate', dataPayload);
};
</script>