Summary  
This chapter covers how to pass data into components using props to make them reusable and configurable.  

General domain of usage  
Component-based UI development

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.

```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.

```vue
<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.

Which is the correct way to define and use a `message` prop in a child component?

Learn how to build dynamic interfaces using Vue.js and modern JavaScript patterns. Render data, handle user interactions, structure components, and manage state in a clear and scalable way. Apply core Vue concepts to create a complete application with reactive data, reusable components, and interactive UI.

Passing Data with Props