Vue Academy · Lektion

Controls, Actions und Args

argTypes für die Controls-Oberfläche, das Actions-Addon zur Ereignisprotokollierung und play() für Interaktionstests

Controls, Actions und Args ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Interaktive Controls

Das Controls-Panel von Storybook verwandelt die Args einer Story in interaktive Formularfelder. Sie ändern eine Prop, und die Komponente wird sofort neu gerendert – ganz ohne Codeänderungen. Mit argTypes gestalten Sie diese Felder.

argTypes definieren

argTypes beschreibt jede Prop: ihren Control-Typ, ihre Optionen und ihre Dokumentation. Es befindet sich im Meta-Objekt neben args.

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

Text- und Boolean-Controls

Der Control-Typ bestimmt das Steuerelement. text stellt ein Eingabefeld bereit, boolean einen Umschalter.

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

Select-Controls mit options

Für eine feste Wertemenge verwenden Sie den Control-Typ select mit einem options-Array. Im Panel wird ein Dropdown-Menü angezeigt.

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

Color- und Number-Controls

Weitere praktische Controls: color öffnet eine Farbauswahl, und number (oder range) stellt eine numerische Eingabe bereit.

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

Das Actions-Addon

Das Actions-Addon protokolliert Ereignisse in einem Panel, damit Sie überprüfen können, ob eine Komponente sie korrekt auslöst. Sie verbinden ein Arg über fn() mit einer Protokollierungsfunktion.

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

So funktioniert fn()

fn() erstellt einen Spy, der Aufrufe im Actions-Panel protokolliert. Wenn die Komponente den Handler aufruft (z. B. ein ausgelöstes click-Ereignis, das onClick zugeordnet ist), sehen Sie den Aufruf und seine Argumente.

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

Ereignisse Handlern zuordnen

Vue emittiert Ereignisse; Storybook ordnet ein on<Event>-Arg dieser Emission zu. Ein emittiertes update-Ereignis wird über ein onUpdate-Action-Arg sichtbar.

argTypes: {
  onUpdate: { action: "update" },
}

Die play-Funktion

Eine Story kann eine play-Funktion enthalten, die nach dem Rendern ausgeführt wird, um Benutzerinteraktionen – etwa Klicken oder Tippen – zu simulieren und das Ergebnis zu überprüfen. So wird eine Story zu einem Interaktionstest.

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

Prüfungen in play

Innerhalb von play können Sie mit expect Zusicherungen formulieren und prüfen, ob eine Action aufgerufen wurde. Dadurch sind Interaktionstests direkt in Storybook sichtbar.

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

Warum Controls + Actions + play wichtig sind

Zusammen machen sie Stories leistungsfähig: Mit Controls können Sie Props erkunden, mit Actions überprüfen Sie, ob Ereignisse ausgelöst werden, und play automatisiert Interaktionen und Zusicherungen – Dokumentation und Tests an einem Ort.

Kurzer Check

Überprüfen Sie Ihr Verständnis von Controls und Actions.

Zusammenfassung

Sie haben Controls, Actions und Args kennengelernt:

argTypes gestaltet das Controls-Panel: text, boolean, select (mit options), color, number/range.
Das Actions-Addon protokolliert Ereignisse; verbinden Sie Handler mit fn() oder ordnen Sie Ereignisse über action zu.
Die play-Funktion wird nach dem Rendern ausgeführt, um Interaktionen mit userEvent zu simulieren und sie mit expect zu überprüfen.
Zusammen machen sie Stories erkundbar, überprüfbar und selbstdokumentierend.

Häufig gestellte Fragen

Ist die Lektion „Controls, Actions und Args“ kostenlos?

Ja — der vollständige Text von „Controls, Actions und Args“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Controls, Actions und Args“?

argTypes für die Controls-Oberfläche, das Actions-Addon zur Ereignisprotokollierung und play() für Interaktionstests Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Controls, Actions und Args“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Storybook für Vue 3 einrichten
Komponenten-Stories schreiben
Controls, Actions und Args
Storybook-Addons und Accessibility-Tests

← Zurück zu Vue Academy