Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Hintergrund

Besprechen wir nun eine Situation: Wie kommunizieren übergeordnete Komponenten mit untergeordneten Komponenten? Wie viele Lösungen haben wir?

• Wir verwenden VueX für die Datenverwaltung. Wenn es jedoch weniger gemeinsam genutzte Zustände zwischen mehreren Komponenten im Projekt gibt , das Projekt klein ist und weniger globale Zustände vorhanden sind, kann die Verwendung von VueX zur Implementierung dieser Funktion die Leistungsfähigkeit von VueX nicht voll ausschöpfen.
• Verwenden Sie B als Durchgangsstation. Wenn Komponente A Informationen an Komponente C weitergeben muss, empfängt B die Informationen von Komponente A und gibt sie dann mithilfe von Eigenschaften an Komponente C weiter. Dies ist eine Lösung, aber wenn zu viele verschachtelte Komponenten vorhanden sind, wird der Code umständlich und schwer zu warten. Wenn die Statusänderung in C an A weitergegeben werden muss, verwenden Sie das Ereignissystem, um sie Ebene für Ebene weiterzugeben.
• Passen Sie einen zentralen Vue-Datenbus an. Dies eignet sich für Komponenten, die Nachrichten über mehrere Ebenen hinweg weitergeben. Der Nachteil besteht jedoch darin, dass der Code weniger wartbar und weniger lesbar ist, wenn mehrere Personen zusammenarbeiten.

1. Dokumentbeschreibung

(1) $props : Das von der aktuellen Komponente empfangene Props-Objekt. Eine Vue-Instanz gewährt Zugriff auf die Eigenschaften ihres Props-Objekts.

(2) $attrs : Enthält Attributbindungen (außer Klasse und Stil), die im übergeordneten Bereich nicht als Eigenschaften erkannt (und abgerufen) werden.

(3) $listeners : Enthält die v-on-Ereignislistener im übergeordneten Bereich (ohne den Modifikator .native). Es kann über v-on="listeners" an die interne Komponente übergeben werden.

2. Spezifische Verwendung

1. Übergeordnete Komponente

 <Vorlage>
  <div>
    <div>Vaterkomponente</div>
    <Kind
      :foo="foo"
      :zoo="Zoo"
      @handle="handleSpaß"
    >
    </Kind>
  </div>
</Vorlage>

<Skript>
Importiere Child aus „./Child.vue“.
Standard exportieren {
  Komponenten: { Child },
  Daten() {
    zurückkehren {
      foo: "foo",
      Zoo: "Zoo"
    }
  },
  Methoden: {
    // Übergebe das Ereignis handleFun(value) {
      this.zoo = Wert
      console.log('In der Enkelkomponente ist ein Klickereignis aufgetreten und ich habe es erhalten.')
    }
  }
}
</Skript>

2. Untergeordnete Komponente (Child.vue)

Die mittlere Schicht als Übertragungsvermittler zwischen der übergeordneten Komponente und der untergeordneten Komponente fügt der untergeordneten Komponente v-bind="$attrs" hinzu, damit die untergeordnete Komponente die Daten empfangen kann.

$attrs sind Daten, die von der übergeordneten Komponente übergeben werden und die die untergeordnete Komponente nicht über Props erhält, wie z. B. Zoo

 <Vorlage>
  <div Klasse = "Unteransicht">
    <p>Sohnkomponente - {{$props.foo}} hat den gleichen Inhalt wie {{foo}}</p>
    <Enkelkind v-bind="$attrs" v-on="$listeners"></Enkelkind>
  </div>
</Vorlage>

<Skript>
importiere GrandChild aus „./GrandChild.vue“
Standard exportieren {
  // Alle Inhalte der übergeordneten Komponente übernehmen inheritAttrs: true,
  Komponenten: { Enkelkind },
  Requisiten: ['foo'],
  Daten() {
    zurückkehren {
    }
  }
}
</Skript>

3. Enkelkomponente (GrandChild.vue)

In der Enkelkomponente müssen Sie Props verwenden, um Daten zu empfangen, die von der übergeordneten Komponente übergeben werden

 <Vorlage>
  <div Klasse = 'Enkelkind-Ansicht'>
    <p>Enkelkomponente</p>
    <p>An die Enkelkomponente übergebene Daten: {{zoo}}</p>
    <button @click="testFun">Klicken Sie hier, um das Ereignis auszulösen</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  // Möchte nicht den gesamten Inhalt der übergeordneten Komponente erben und keine Attribute im Stammelement der Komponente anzeigen DOM inheritAttrs: false,
  // In dieser Komponente müssen Sie die von der übergeordneten Komponente übergebenen Daten empfangen. Beachten Sie, dass der Parametername in den Props nicht geändert werden kann. Er muss mit den von der übergeordneten Komponente übergebenen Props identisch sein: ['zoo'],
  Methoden: {
    testFun() {
      dies.$emit('Handle', '123')
    }
  }
}
</Skript>

Abschluss

Aus dem obigen Code können wir ersehen, dass durch die Verwendung der Attribute attrs und inheritAttrs präziser Code verwendet werden kann, um die Daten von Komponente A an Komponente C zu übergeben. Der Anwendungsbereich dieses Szenarios ist recht breit.

Über Listener binden wir v-on="$listeners" an Komponente b und hören in Komponente a auf die von Komponente c ausgelösten Ereignisse. Die von Komponente c gesendeten Daten können an Komponente a weitergegeben werden.

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von $props, $attrs und $listeners in Vue. Weitere relevante Vue-Inhalte zu $props, $attrs und $listeners finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!