Optimiere deine Vue.js Komponenten - Erfahre, wann Props am besten geeignet sind und wann Slots eine bessere Wahl sind. Jetzt mehr erfahren!
19. September 2024
In Vue.js dienen Props und Slots unterschiedlichen Zwecken und bieten verschiedene Vorteile, je nach Anwendungsfall.
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 ermöglichen es, dynamische Inhalte zwischen Komponenten auszutauschen und bieten mehr Flexibilität, da der Inhalt zur Laufzeit festgelegt werden kann.
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>
Props sind nützlich, wenn die Struktur und das Verhalten der Komponente klar definiert und starr sind.
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>
Slots machen Komponenten wiederverwendbarer und flexibler, da sie nicht auf vorgegebene Inhalte beschränkt sind.
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>
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>
Die Wahl zwischen Props und Slots hängt vom spezifischen Anwendungsfall ab.
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>
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.