Communication between components in Vue.js using events

In Vue.js, emit is a function that allows a child component to send a custom event to its parent component.

While props are the most common way to pass data from a parent component to a child, eventos are the most common way of communication in the reverse direction.

• ▲ Props: Allow for downward data flow (from parent to child)
• ▼ Events: Allow for upward data flow (from child to parent)

Additionally, the emitted event can carry associated data, enabling the parent to react and perform actions based on what happens in the child.

How to use emit

In Vue.js, we can declare the events that a component can emit in several ways. The most common is using the defineEmits() function:

<script setup>
// We define the events that this component can emit
const emit = defineEmits(['update', 'delete', 'select'])

// Now we can use the emit function in our component
function handleClick() {
  emit('update', { id: 1, value: 'new value' })
}
</script>

The defineEmits function returns an emit function configured with the events we want, which we can then use in our code.

Example of emit

Let’s better understand by doing a simple example.

• We create a child component that emits an event when a button is clicked.
• The parent component will listen for this event and display a message in the console.

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
const emit = defineEmits(['button-clicked']);

const handleClick = () => {
  emit('button-clicked', { message: 'The button was clicked' });
};
</script>

<template>
  <div>
    <ChildComponent @button-clicked="handleClick" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleClick = (data) => {
  console.log('Event received:', data.message);
};
</script>

Event validation with defineEmits

We can also use a more detailed syntax to validate the data types that are emitted:

<!-- ChildComponent.vue -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
const emit = defineEmits({
  // Validate that the 'button-clicked' event receives an object with a message
  'button-clicked': (payload) => {
    return payload.message && typeof payload.message === 'string';
  },
});

const handleClick = () => {
  emit('button-clicked', { message: 'The button was clicked' });
};
</script>

Two-way communication with v-model and emit

Custom events are the basis of the v-model directive in custom components.

We can implement components that support v-model by emitting the update:modelValue event:

<template>
  <input :value="modelValue" @input="handleInput" />
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(['update:modelValue']);

const handleInput = (event) => {
  emit('update:modelValue', event.target.value);
};
</script>

<template>
  <div>
    <CustomInput v-model="text" />
    <p>Entered text: {{ text }}</p>
  </div>
</template>

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

const text = ref('');
</script>