Passing Data with Props

Components often need to receive data from their parent. In Vue, this is done using props.

Props allow you to pass values into a component as attributes.

<!-- Message.vue -->
<script setup>
defineProps(["text"]);
</script>

<template>
  <p>{{ text }}</p>
</template>

Here, the component expects a text prop.

You can pass data to this component from a parent.

<script setup>
import Message from "./components/Message.vue";
</script>

<template>
  <Message text="Hello from parent" />
</template>

The value is passed into the component and displayed in the template.

Props help you create reusable components that can display different data depending on how they are used.