Vue Component Optimization - Correctly Using Props and Slots

Optimize your Vue.js components - Learn when props are best suited and when slots are a better choice. Find out more now!

September 19th, 2024

Nico Meyer
Nico Meyer
Fullstack JavaScript Entwickler

Table of Contents

  1. Introduction
  2. When to Use Props
  3. When to Use Slots
  4. Practical Examples
  5. Best Practices

Introduction

In Vue.js, props and slots serve unique purposes and offer different advantages based on the use case.

Props

Props allow data to be passed from a parent component to a child component, which is useful when the child component requires specific and predictable data.

Slots

Slots enable dynamic content exchange between components, providing more flexibility as the content can be defined at runtime.

When to Use Props

Clear Data Passing

Props are ideal when a component needs specific data that should not be changed during runtime.

CustomButtonWithProps.vue
<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>
ParentComponent.vue
<template>
    <CustomButtonWithProps text="Click Me" icon="👍" textColor="blue" />
</template>
<script lang="ts" setup>
import CustomButtonWithProps from './CustomButtonWithProps.vue'
</script>

Static Components

Props are useful when a component's structure and behavior are clearly defined and unchanging.

When to Use Slots

Dynamic Content

Slots are beneficial when a component needs to contain content that can be flexibly changed at runtime.

ChildComponent.vue
<template>
  <button>
    <slot name="icon"></slot>
    <slot></slot>
  </button>
</template>

<script lang="ts" setup>
</script>
ParentComponent.vue
<template>
  <CustomButtonWithSlots>
    <template #icon>
      <span>👍</span>
    </template>
    Click Me
  </CustomButtonWithSlots>
</template>

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

Reusability and Flexibility

Slots make components more reusable and flexible as they are not constrained by predefined content.

Practical Examples

Props

Example components that use simple and predictable data.

<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

Components that can contain various types of content.

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

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

Best Practices

Decision Making: Props or Slots?

Choosing between props and slots depends on the specific use case.

  • Use props for simple, predictable data transfers. Implement slots if flexibility and reusability are key.

Combining Props and Slots

Often, a combination of both is the optimal approach.

<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>

Summary

Props and slots each have their respective advantages and use cases. Props are ideal for static content and clear data transfers, while slots are better for dynamic content and increased flexibility.