Vue.js – Functional Component

Tutorial Vue.js

von Ardian Shala, 05.04.2019
Functional Components sind in Vue.js lediglich Components, welche props nutzen. Hierbei wird eine Component leichtgewichtiger und perfomanter.

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.

#component #functional #vue #vuejs

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.