Props

Props sind der Mechanismus, um Daten von Eltern- an Kind-Komponenten zu übergeben.

Grundlagen

<script setup>
defineProps(['title', 'message'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ message }}</p>
</template>

<template>
  <ChildComponent title="Willkommen" message="Hallo Welt!" />
</template>

Typisierung

Props sollten mit Typen definiert werden für bessere Dokumentation und Validierung:

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean,
  items: Array,
  user: Object,
  callback: Function
})
</script>

Vue validiert die Props zur Laufzeit und gibt Warnungen bei Typverletzungen aus.

Erweiterte Validierung

<script setup>
defineProps({
  // Erforderlicher String
  title: {
    type: String,
    required: true
  },
  // Number mit Standardwert
  count: {
    type: Number,
    default: 0
  },
  // Objekt mit Factory-Funktion als Default
  user: {
    type: Object,
    default: () => ({ name: 'Gast' })
  },
  // Custom Validator
  status: {
    type: String,
    validator: (value) => ['pending', 'active', 'done'].includes(value)
  }
})
</script>

Props mit TypeScript

Mit TypeScript können Props typsicher definiert werden:

<script setup lang="ts">
interface User {
  id: number
  name: string
  email: string
}

const props = defineProps<{
  title: string
  count?: number
  user: User
}>()

// Mit Defaults (withDefaults)
const props = withDefaults(defineProps<{
  title: string
  count?: number
}>(), {
  count: 0
})
</script>

Options API

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    // Props über this zugreifbar
    console.log(this.title)
  }
}
</script>

Props Binding

Props können statisch oder dynamisch gebunden werden:

<template>
  <!-- Statischer String -->
  <BlogPost title="Mein erster Post" />

  <!-- Dynamisch mit v-bind -->
  <BlogPost :title="post.title" />

  <!-- Dynamischer Number (v-bind erforderlich!) -->
  <Pagination :page="currentPage" />

  <!-- Dynamischer Boolean -->
  <Modal :is-open="showModal" />

  <!-- Boolean Shorthand (true wenn vorhanden) -->
  <Input disabled />

  <!-- Alle Props eines Objekts -->
  <BlogPost v-bind="post" />
</template>

One-Way Data Flow

Props folgen einem Einweg-Datenfluss: Änderungen fließen nur von Eltern zu Kindern.

<script setup>
const props = defineProps(['initialCount'])

// FALSCH: Props direkt mutieren
function increment() {
  props.initialCount++  // Vue warnt!
}

// RICHTIG: Lokale Kopie erstellen
import { ref } from 'vue'
const count = ref(props.initialCount)
</script>

Dokumentation

Offizielle Vue Dokumentation:

Props - Properties

API Referenz:

defineProps() - Props definieren