Walidacja Props

Protokoły komunikacyjne NOVA LAB wymagają walidacji każdego sygnału - Vue oferuje rozbudowany system walidacji props, który chroni komponenty przed nieprawidłowymi danymi.

Required Props

Oznaczenie prop jako wymaganego:

1<script setup>
2const props = defineProps({
3  name: {
4    type: String,
5    required: true
6  },
7  // Skrócona forma (required implicit)
8  id: {
9    type: Number,
10    required: true
11  }
12})
13</script>

Domyślne Wartości

Ustawienie wartości domyślnej gdy prop nie jest przekazany:

1<script setup>
2const props = defineProps({
3  delay: {
4    type: Number,
5    default: 480  // 8 minut w sekundach
6  },
7  status: {
8    type: String,
9    default: 'standby'
10  },
11  // Dla obiektów i tablic - funkcja fabryczna
12  config: {
13    type: Object,
14    default: () => ({ mode: 'auto', retries: 3 })
15  }
16})
17</script>

Custom Validator

Funkcja

validator

1<script setup>
2const props = defineProps({
3  delay: {
4    type: Number,
5    default: 480,
6    validator: (value) => {
7      // Delay musi być między 0 a 1440 sekund
8      return value >= 0 && value <= 1440
9    }
10  },
11  priority: {
12    type: String,
13    default: 'normal',
14    validator: (value) => {
15      return ['low', 'normal', 'high', 'critical'].includes(value)
16    }
17  }
18})
19</script>

Gdy walidacja nie przejdzie, Vue wyświetli ostrzeżenie w konsoli (w trybie development).

Wiele Typów

Prop może akceptować kilka typów:

1<script setup>
2const props = defineProps({
3  id: [String, Number],       // String lub Number
4  value: [String, Number, null] // dozwolony null
5})
6</script>