useAttrs gibt Komponentenattribute zurück, die nicht als Requisiten deklariert sind und zum manuellen Binden an bestimmte Elemente verwendet werden. useSlots stellt ein Objekt mit Slot-Inhalten bereit, sodass Slots nach Namen überprüft und gerendert werden k?nnen. Beide werden h?ufig verwendet, um Komponenten h?herer Ordnung oder Wrapper-Komponenten zu erstellen, die eine pr?zise Steuerung von Eigenschaften und Slots erfordern, und werden in Verbindung mit Fragmenten im Setup verwendet.

In der Composition API von Vue 3 sind useAttrs und useSlots Hilfsfunktionen, die Ihnen Zugriff auf die Attribute und Slots erm?glichen, die an eine Komponente übergeben werden. Sie sind besonders nützlich, wenn Sie Wrapper-Komponenten oder Abstraktionen h?herer Ordnung erstellen, bei denen Sie eine detaillierte Kontrolle darüber ben?tigen, wie Requisiten, Attribute und Inhalte gehandhabt werden.

Was ist useAttrs?

useAttrs gibt ein Objekt zurück, das die geerbten Attribute der Komponente (wie class , style oder benutzerdefinierte Ereignis-Listener) enth?lt, die nicht als Requisiten deklariert sind. Dies ist hilfreich, wenn Sie diese Attribute manuell auf ein bestimmtes Element in Ihrer Vorlage anwenden m?chten – h?ufig verwendet in Wrapper- oder UI-Komponenten.

Wenn eine Komponente über ein einzelnes Stammelement verfügt, werden Attribute standardm??ig automatisch darauf angewendet. Bei setup() und Fragmenten (mehrere Stammknoten) kommt es jedoch nicht zu einem automatischen Attribut-Fallthrough, sodass Sie mit useAttrs eine explizite Kontrolle erhalten.

Angenommen, Sie haben einen benutzerdefinierten Eingabe-Wrapper:

 importiere { useAttrs } aus 'vue'

Standard exportieren {
  aufstellen() {
    const attrs = useAttrs()
    return {attrs}
  },
  Vorlage: `
    <div class="input-wrapper">
      <input v-bind="attrs" />
    </div>
  `
}

Wenn nun jemand diese Komponente verwendet:

 <MyInput v-model="text" placeholder="Text eingeben" class="large" @focus="onFocus" />

Alle diese Attribute ( placeholder , class , @focus und sogar V-Model- Bindungen) werden über v-bind="attrs" an den inneren weitergeleitet.

Was ist useSlots?

useSlots gibt ein Objekt zurück, das die an die Komponente übergebenen Slots darstellt. Jeder Schlüssel entspricht einem Slot-Namen (z. B. default , header , footer ). Slot-Werte sind Arrays von VNodes (virtuellen Knoten), die Sie bedingt rendern oder weitergeben k?nnen.

Dies ist nützlich, wenn Sie renderlose Komponenten schreiben oder wenn Sie Slot-Inhalte vor dem Rendern überprüfen oder bearbeiten müssen.

Eine Kartenkomponente mit optionaler Kopf- und Fu?zeile:

 { useSlots } aus 'vue' importieren

Standard exportieren {
  aufstellen() {
    const slots = useSlots()
    return { Slots }
  },
  Vorlage: `
    <div class="card">
      <header v-if="slots.header">
        <slot name="header" />
      </header>
      <main>
        <slot />
      </main>
      <footer v-if="slots.footer">
        <slot name="footer" />
      </footer>
    </div>
  `
}

Sie k?nnen jetzt mithilfe von slots.header prüfen, ob ein Slot vorhanden ist, bevor Sie ihn rendern, wodurch leere Wrapper verhindert werden.

Wann man sie verwendet

• useAttrs : Verwenden Sie diese Option, wenn Sie wiederverwendbare Wrapper erstellen (z. B. Formulareingaben, Schaltfl?chen, Modalit?ten) und Attribute wie Ereignisse oder Klassen an interne Elemente weiterleiten m?chten.
• useSlots : Verwenden Sie diese Option, wenn Sie ein bedingtes Rendering von Slots ben?tigen oder wenn Sie mit dynamischer Slot-Logik arbeiten (z. B. Layoutkomponenten, Registerkarten oder Symbolleisten).

Beide Funktionen sind vollst?ndig reaktiv und werden automatisch aktualisiert, wenn das übergeordnete Element neue Requisiten oder Inhalte übergibt.

Grunds?tzlich erm?glichen useAttrs und useSlots Ihnen den einfachen Zugriff auf die Komponentenkompositionsfunktionen von Vue und erleichtern so das Schreiben flexibler, wiederverwendbarer Komponenten, ohne dass das Vererbungsverhalten verloren geht.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie useAttrs und useSlots in der Vue.js Composition API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!