Vue Component Communication Explained — Props and Emits

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Vue Component Communication Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue components communicate through props (parent sends data down), emits (child sends events up), and provide/inject for deeply nested component trees.

What You'll Learn

Props definition and validation
Emit events and payloads
v-model on custom components
provide/inject for deep trees
Props vs slots vs events

Why It Matters

Proper component communication creates maintainable, reusable components with clear data flow. Understanding when to use each pattern prevents spaghetti architecture.

<template>
  <div>
    <UserCard
      v-for="user in users"
      :key="user.id"
      :user="user"
      :variant="variant"
      @select="handleUserSelect"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import UserCard from "./UserCard.vue";

const users = ref([
  { id: 1, name: "Alice", role: "Admin" },
  { id: 2, name: "Bob", role: "User" },
]);
const variant = ref("compact");

function handleUserSelect(userId) {
  console.log("Selected user:", userId);
}
</script>

<!-- UserCard.vue -->
<template>
  <div @click="$emit('select', user.id)">
    <h3>{{ user.name }}</h3>
    <p>{{ user.role }}</p>
  </div>
</template>

<script setup>
defineProps({
  user: { type: Object, required: true },
  variant: { type: String, default: "compact" },
});
defineEmits(["select"]);
</script>

Expected output: Users render as cards. Clicking a card emits the select event with the user ID to the parent.

← Previous Vue Forms and v-model Explained — Two-Way Data Binding Next → Vue Slots Explained — Content Distribution with Slots

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Vue