Vue.js Composition API: Wie man expose in <script setup> richtig einsetzt

Published on 7. Oktober 2025

In der modernen Vue.js-Entwicklung spielt die Composition API eine zentrale Rolle bei der Strukturierung von Komponenten. Mit dem <script setup>-Syntax wird die Entwicklung noch eleganter und übersichtlicher. Doch wie funktioniert expose in dieser Umgebung? Und wozu braucht man es eigentlich?

Was ist expose in Vue.js?

Die Funktion expose ermöglicht es, bestimmte Eigenschaften oder Methoden aus einer Komponente für externe Zugriffe freizugeben – zum Beispiel von Elternkomponenten über $refs. Standardmäßig sind alle öffentlichen Daten und Methoden in der Composition API bereits verfügbar, aber expose erlaubt präzise Kontrolle darüber, was genau freigegeben werden soll.

Grundlegende Verwendung mit <script setup>

In einer Komponente mit <script setup> sieht die Verwendung von expose folgendermaßen aus:

<template>
  <div class="my-component">
    <p>{{ internalMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Interne Daten, die nicht außerhalb der Komponente verfügbar sein sollen
const internalMessage = ref('Dies ist eine interne Nachricht');
const count = ref(0);

// Öffentliche Methoden, die von außen aufgerufen werden können
function increment() {
  count.value++;
}

function getCounter() {
  return count.value;
}

// Mit expose werden nur diese Methoden freigegeben
expose({
  increment,
  getCounter
});
</script>

Praktisches Beispiel: Ein Modal-Komponent mit expose

Stellen Sie sich eine wiederverwendbare Modal-Komponente vor, die von einer Elternkomponente geöffnet werden soll:

<!-- Modal.vue -->
<template>
  <q-dialog v-model="isVisible" @hide="onHide">
    <q-card class="modal-card">
      <q-card-section>
        <div class="text-h6">{{ title }}</div>
      </q-card-section>
      <q-card-section>
        {{ message }}
      </q-card-section>
      <q-card-actions align="right">
        <q-btn 
          label="Schließen" 
          color="primary" 
          @click="closeModal"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);
const title = ref('');
const message = ref('');

// Öffentliche Methoden für externe Nutzung
function openModal(newTitle, newMessage) {
  title.value = newTitle;
  message.value = newMessage;
  isVisible.value = true;
}

function closeModal() {
  isVisible.value = false;
}

// Nur diese Methoden werden freigegeben
expose({
  openModal,
  closeModal
});

function onHide() {
  // Event-Handler für das Schließen des Modals
}
</script>

Nutzung in der Elternkomponente

Die Elternkomponente kann nun über $refs auf die veröffentlichten Methoden zugreifen:

<template>
  <div class="parent">
    <q-btn 
      label="Modal öffnen" 
      color="primary" 
      @click="openModal"
    />

    <Modal ref="modalRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Modal from './Modal.vue';

const modalRef = ref(null);

function openModal() {
  // Aufruf der veröffentlichten Methode
  if (modalRef.value) {
    modalRef.value.openModal('Neue Nachricht', 'Dies ist eine dynamische Meldung');
  }
}
</script>

Wann sollte man expose verwenden?

1. Zugriff auf interne Zustände

Wenn Sie Komponenten erstellen, die von außen gesteuert werden sollen, aber den internen Zustand nicht vollständig preisgeben wollen.

2. Wiederverwendbare Komponenten

Bei der Erstellung von Bibliothekskomponenten oder Design-Systemen ist es sinnvoll, nur die notwendigen Schnittstellen freizugeben.

3. Komplexere Interaktionen

Wenn Sie Komponenten mit komplexen Zustandsmanagement benötigen, die über einfache Props nicht ausreichend gesteuert werden können.

Best Practices und Tipps

1. Klar definierte Schnittstellen

Verwenden Sie expose nur für Methoden und Eigenschaften, die wirklich benötigt werden:

<script setup>
// Verboten - alles freigeben
expose({
  method1,
  method2,
  data1,
  data2
});

// Empfohlen - nur notwendige Elemente
expose({
  publicMethod,
  getData
});
</script>

2. Konsistente Namensgebung

Verwenden Sie klare, beschreibende Namen für die freigegebenen Methoden:

<script setup>
function startProcess() { /* ... */ }
function stopProcess() { /* ... */ }

// Klare Benennung der freigegebenen Funktionen
expose({
  startProcess,
  stopProcess
});
</script>

3. Kombination mit Pinia

In Kombination mit Pinia können Sie expose nutzen, um spezifische Zustandsoperationen freizugeben:

<script setup>
import { useMyStore } from '../stores/myStore';
import { ref } from 'vue';

const store = useMyStore();
const localData = ref('');

function updateStoreData(value) {
  store.updateData(value);
  localData.value = value;
}

expose({
  updateStoreData
});
</script>

Fazit

Die expose-Funktion in der Vue.js Composition API mit <script setup> ist ein mächtiges Werkzeug zur Kontrolle von Komponenten-APIs. Sie ermöglicht es Ihnen, den internen Zustand zu schützen, gleichzeitig aber notwendige Schnittstellen für externe Interaktionen freizugeben.

Durch die Kombination mit Quasar-Komponenten und Pinia können Sie komplexe, wiederverwendbare Komponenten erstellen, die sowohl flexibel als auch sicher sind. Die präzise Kontrolle über öffentliche APIs trägt dazu bei, Ihre Anwendung wartbarer und skalierbarer zu machen.

Verwenden Sie expose sinnvoll – nicht als Standardlösung für alle Fälle, sondern als gezieltes Werkzeug für spezifische Use-Cases, um die Qualität Ihres Vue.js-Code zu verbessern.

Previous

Next