Vue-Kapselungskomponententool $attrs, $listeners-Verwendung

Vorwort

Wenn für die Verschachtelung mehrstufiger Komponenten eine Datenübertragung erforderlich ist, wird üblicherweise die Methode über vuex verwendet. Aber einfach Daten ohne Zwischenverarbeitung weiterzugeben und für die Verarbeitung Vuex zu verwenden, ist etwas übertrieben. Es gibt also zwei Attribute, $attrs und $listeners, die normalerweise zusammen mit inheritAttrs verwendet werden.

$attrs

Die von der übergeordneten Komponente an die benutzerdefinierte untergeordnete Komponente übergebenen Eigenschaften werden automatisch auf das äußerste Tag innerhalb der untergeordneten Komponente gesetzt, wenn kein Prop-Empfänger vorhanden ist. Wenn es sich um eine Klasse und einen Stil handelt, werden die Klasse und der Stil des äußersten Tags zusammengeführt.

Wenn die untergeordnete Komponente die von der übergeordneten Komponente übergebenen Nicht-Prop-Attribute nicht erben möchte, können Sie die Vererbung mit inheritAttrs deaktivieren und dann die übergebenen externen Nicht-Prop-Attribute über v-bind="$attrs" an das gewünschte Tag setzen. Dadurch werden jedoch weder Klasse noch Stil geändert.

Offizieller Website-Link zum inheritAttrs-Attribut

2.4.0 Neu

Typ: Boolescher Wert

Standardwert: true

ausführlich:

Standardmäßig wird für Attributbindungen mit übergeordnetem Gültigkeitsbereich, die nicht als Eigenschaften erkannt werden, ein „Fallback“ ausgeführt und sie werden als normale HTML-Attribute auf das Stammelement der untergeordneten Komponente angewendet. Beim Schreiben von Komponenten, die ein Zielelement oder eine andere Komponente umschließen, ist dies möglicherweise nicht immer das erwartete Verhalten. Indem Sie inheritAttrs auf „false“ setzen, wird dieses Standardverhalten entfernt. Diese Attribute können durch die Instanzeigenschaft $attrs (ebenfalls neu in 2.4) wirksam gemacht werden und können durch v-bind explizit an Nicht-Root-Elemente gebunden werden.

Hinweis: Diese Option wirkt sich nicht auf Klassen- und Stilbindungen aus.

Beispiel:

Übergeordnete Komponente

<Vorlage>
  <meine-Eingabe
      erforderlich
      Platzhalter="Bitte Inhalt eingeben"
      Typ="Text"
      Klasse = "Theme-Dunkel"
  />
</Vorlage>

<Skript>
importiere MyInput aus './child'
Standard exportieren {
  Name: "Elternteil",
  Komponenten:
    MeineEingabe
  }
}
</Skript>

Unterkomponenten

<Vorlage>
  <div>
    <Eingabe
        v-bind="$attrs"
        Klasse="Formular-Steuerelement"
    />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'MyInput',
  inheritAttrs: false
}
</Skript>

Die untergeordnete Komponente akzeptiert den von der übergeordneten Komponente übergebenen Wert nicht und bindet ihn auch nicht. Mit dem Attribut v-bind="$attrs" akzeptiert und bindet sie ihn jedoch automatisch.

inheritAttrs: false

inheritAttrs: true

$listeners (offizielle Erklärung)

Listener: Enthält v-on-Ereignislistener im übergeordneten Bereich (ohne den Modifikator .native). Es kann über v-on="$listeners" an innere Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

Schauen wir uns zunächst den Code an: Hier nehmen wir nur die Fokus- und Eingabeereignisse als Beispiele.

// Übergeordnete Komponente <template>
  <meine-Eingabe
      erforderlich
      Platzhalter
      Klasse = "Theme-Dunkel"
      @focue="imFokus"
      @input="beiEingabe"
  >
  </meine-Eingabe>
</Vorlage>
<Skript>
importiere MyInput aus './child'
Standard exportieren {
  Komponenten:
    MeineEingabe
  },
  Methoden: {
    bei Fokus (e) {
      Konsole.log(e.Ziel.Wert)
    },
    beiEingabe (e) {
      Konsole.log(e.Ziel.Wert)
    }
  }
}
</Skript>

// Unterkomponente <template>
  <div>
    <Eingabe
        Typ="Text"
        v-bind="$attrs"
        Klasse="Formular-Steuerelement"
        @focus="$emit('Fokus', $Ereignis)"
        @input="$emit('Eingabe', $Ereignis)"
    />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'MyInput',
  inheritAttrs: false
}
</Skript>

Das Binden nativer Ereignisse auf diese Weise ist sehr mühsam. Jedes native Ereignis muss gebunden werden, aber die Verwendung von v-on="$listeners" erspart viel Ärger.

 <Eingabe
        Typ="Text"
        v-bind="$attrs"
        Klasse="Formular-Steuerelement"
+ v-on="$listeners"
- @focus="$emit('Fokus', $Ereignis)"
- @input="$emit('Eingabe', $Ereignis)"
    />

Diese eine Codezeile kann das Problem der Bindung aller nativen Ereignisse lösen

Anwendungsszenarien

Wird verwendet, wenn Komponenten Werte übergeben: Der Großvater übergibt Werte an die Vaterkomponente, und die Vaterkomponente erhält alle Attribute, die nicht in den Eigenschaften des Vaters enthalten sind, über $attrs. Die Vaterkomponente bindet $attrs und $listeners an die Enkelkomponente, sodass die Enkelkomponente den vom Großvater übergebenen Wert abrufen und die im Großvater definierte Methode aufrufen kann.

Wird für die Sekundärverpackung einiger UI-Bibliotheken verwendet: Wenn beispielsweise die Komponenten in Element-UI Ihren eigenen Nutzungsszenarien nicht gerecht werden können, werden sie sekundär verpackt, Sie möchten jedoch ihre eigenen Eigenschaften und Methoden beibehalten. Derzeit sind $attrs und $listners eine perfekte Lösung.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von $attrs und $listeners, einem leistungsstarken Tool für Vue-Kapselungskomponenten. Weitere Informationen zur Verwendung von $attrs und $listeners von Vue-Kapselungskomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!