Vue.js – Functional Component

Functional Component definieren

Um eine Functional Component in Vue.js zu definieren, wird lediglich das Attribut functional im template Tag genutzt.

<template functional>
    <!-- template -->
</template>

Properties nutzen

Um Properties in einer Functional Component nutzen zu können, reicht es, jene im Template zu definieren.
Hierbei wird die Property props verwendet.

<template functional>
    <div>
        {{ props.title }}
    </div>
</template>

Events nutzen

$event steht in einer Functional Component nicht zur Verfügung.
Abhilfe schafft hier das Reinreichen einer Callback Funktion über props – hier props.onClicked

<template functional>
    <button @click="props.onClicked($event)">
        {{ props.title }}
    </button>
</template>

Card Component erstellen

Zur Demonstration wird eine einfache Card Component erstellt, welche mittels props.title einen individuellen Title sowie über slot Content ausgeben kann.

<template functional>
    <div class="card shadow-sm">
        <div class="card-body">
            <div v-if="props.title" class="card-title">
                <div class="display-4">{{ props.title }}</div>
            </div>
            <div class="card-text">
                <slot />
            </div>
        </div>
    </div>
</template>

Card Component nutzen

<Card title="Some Title">
    some content
</Card>

Fazit

Einfache Components lassen sich schnell mit dem Attribute functional als Functional Component deklarieren. Hierbei ist kein Script Tag notwendig.