Props Basics

Welcome to the NOVA LAB Communication Station! Here orbital systems transmit mission parameters to Martian modules - just as parent components pass props to children. Every signal counts when the Earth-Mars distance means 8 minutes of delay!

What are Props?

Props (properties) are a mechanism for passing data from a parent component to a child component. It's a one-way data flow - like a radio signal from Earth to Mars.

1<!-- Parent.vue -->
2<template>
3  <MarsModule name="Oxygen Generator" :temperature="-63" />
4</template>
5
6<!-- MarsModule.vue -->
7<script setup>
8const props = defineProps(['name', 'temperature'])
9</script>
10
11<template>
12  <div>{{ name }}: {{ temperature }}°C</div>
13</template>

Typed Props

We can specify prop types - like a transmission protocol specification:

1<script setup>
2const props = defineProps({
3  name: String,
4  temperature: Number,
5  critical: Boolean,
6  modules: Array,
7  config: Object
8})
9</script>

Props Object Binding

Instead of passing each prop individually, we can use

v-bind

1<template>
2  <!-- Individually -->
3  <MarsModule :name="data.name" :status="data.status" />
4
5  <!-- All at once -->
6  <MarsModule v-bind="data" />
7</template>
8
9<script setup>
10import { reactive } from 'vue'
11
12const data = reactive({
13  name: 'Oxygen Generator',
14  status: 'operational',
15  temperature: -63
16})
17</script>

Boolean Props

Boolean props have special syntax - the presence of the attribute means

true

1<template>
2  <SystemModule critical />          <!-- critical = true -->
3  <SystemModule :critical="true" />  <!-- explicit true -->
4  <SystemModule :critical="false" /> <!-- explicit false -->
5  <SystemModule />                   <!-- critical = false (default) -->
6</template>

One-Way Data Flow

Props are one-directional - the child CANNOT modify parent props:

1<script setup>
2const props = defineProps(['title'])
3
4// ❌ WRONG - don't modify props!
5// props.title = 'New title'
6
7// ✅ Create a local copy
8import { ref } from 'vue'
9const localTitle = ref(props.title)
10</script>