Podstawy Props

Witaj w Stacji Komunikacji NOVA LAB! Tu systemy orbitalne przekazują parametry misji do modułów marsjańskich - podobnie jak komponenty-rodzice przekazują props dzieciom. Każdy sygnał liczy się, gdy odległość Ziemia-Mars to 8 minut opóźnienia!

Czym są Props?

Props (properties) to mechanizm przekazywania danych z komponentu rodzica do komponentu dziecka. To jednokierunkowy przepływ danych - jak sygnał radiowy z Ziemi na Marsa.

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>

Typowane Props

Możemy określić typy props - to jak specyfikacja protokołu transmisji:

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

Zamiast przekazywać każdy prop osobno, możemy użyć

v-bind

1<template>
2  <!-- Pojedynczo -->
3  <MarsModule :name="data.name" :status="data.status" />
4
5  <!-- Wszystkie naraz -->
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 mają specjalną składnię - obecność atrybutu oznacza

true

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

One-Way Data Flow

Props są jednokierunkowe - dziecko NIE może modyfikować props rodzica:

1<script setup>
2const props = defineProps(['title'])
3
4// ❌ ŹLEEE - nie modyfikuj props!
5// props.title = 'Nowy tytuł'
6
7// ✅ Stwórz lokalną kopię
8import { ref } from 'vue'
9const localTitle = ref(props.title)
10</script>