Vue Component Optimierung - Props und Slots richtig verwenden

Inhaltsverzeichnis

1. Einführung
2. Wann du Props verwenden solltest
3. Wann du Slots verwenden solltest
4. Praktische Beispiele
5. Best Practices

Einführung

In Vue.js dienen Props und Slots unterschiedlichen Zwecken und bieten verschiedene Vorteile, je nach Anwendungsfall.

Sie suchen einen Vue.js Entwickler?

Jetzt Kontakt aufnehmen!

Props

Props ermöglichen es, Daten von einer Elternkomponente an eine Kindkomponente zu übergeben. Das ist nützlich, wenn die Kindkomponente genaue und vorhersehbare Daten benötigt.

Slots

Slots ermöglichen es, dynamische Inhalte zwischen Komponenten auszutauschen und bieten mehr Flexibilität, da der Inhalt zur Laufzeit festgelegt werden kann.

Wann du Props verwenden solltest

Eindeutige Datenweitergabe

Props sind ideal, wenn eine Komponente spezifische Daten benötigt, die zur Laufzeit nicht geändert werden sollen.

<template>
  <button :style="{ color: textColor }">
      <span v-if="icon">{{ icon }}</span>
      {{ text }}
  </button>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  text: String,
  icon: String,
  textColor: String,
})
</script>

<template>
    <CustomButtonWithProps text="Click Me" icon="👍" textColor="blue" />
</template>
<script lang="ts" setup>
import CustomButtonWithProps from './CustomButtonWithProps.vue'
</script>

Statische Komponenten

Props sind nützlich, wenn die Struktur und das Verhalten der Komponente klar definiert und starr sind.

Wann du Slots verwenden solltest

Dynamische Inhalte

Slots sind nützlich, wenn eine Komponente Inhalte enthalten muss, die zur Laufzeit flexibel geändert werden können.

<template>
  <button>
    <slot name="icon"></slot>
    <slot></slot>
  </button>
</template>

<script lang="ts" setup>
</script>

<template>
  <CustomButtonWithSlots>
    <template #icon>
      <span>👍</span>
    </template>
    Click Me
  </CustomButtonWithSlots>
</template>

<script lang="ts" setup>
import CustomButtonWithSlots from './CustomButtonWithSlots.vue'
</script>

Wiederverwendbarkeit und Flexibilität

Slots machen Komponenten wiederverwendbarer und flexibler, da sie nicht auf vorgegebene Inhalte beschränkt sind.

Praktische Beispiele

Props

Beispielkomponenten, die einfache und vorhersehbare Daten verwenden.

<template>
  <div class="card">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
  description: String,
})
</script>

Slots

Komponenten, die verschiedene Arten von Inhalten enthalten können.

<template>
  <div class="card">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script lang="ts" setup>
</script>

Best Practices

Entscheidungsfindung: Props oder Slots?

Die Wahl zwischen Props und Slots hängt vom spezifischen Anwendungsfall ab.

• Verwende Props für einfache, vorhersagbare Datenübertragungen.
• Setze Slots ein, wenn Flexibilität und Wiederverwendbarkeit entscheidend sind.

Kombination von Props und Slots

Oft ist eine Kombination aus beiden der optimale Ansatz.

<template>
  <div>
    <slot name="header" :title="title"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
})
</script>

Zusammenfassung

Props und Slots haben beide ihre jeweiligen Vorteile und Anwendungsfälle. Props sind ideal für statische Inhalte und eindeutige Datenweitergabe, während Slots für dynamische Inhalte und erhöhte Flexibilität sorgen.

Sie suchen einen Vue.js Entwickler?

Jetzt Kontakt aufnehmen!