Vue-Ereignisparameter $event = Ereigniswertfall

Vorlage

<el-table :data="Datenliste">
 <el-table-column label="id" prop="id"></el-table-column>
 <el-table-column label="Name" prop="Name">
 <template v-slot="Eigenschaften">
  <el-Eingabenummer
  :min="0"
  v-Modell="Eigenschaften.Zeilenanzahl"
  @change="Produkt aktualisieren($event)"
  Größe="mini"
 ></el-Eingabenummer>
 </Vorlage>
 </el-Tabellenspalte>
</el-Tabelle>

Skriptabschnitt

Standard exportieren {
 Daten() {
 zurückkehren {
  Datenliste: [
  { ID: 1, Name: '001', Anzahl: 1 },
  { ID: 2, Name: '002', Anzahl: 2 },
  { ID: 3, Name: '003', Anzahl: 3 },
  ]
 }
 },
 Methoden: {
 updateProdukt(Wert) {
  console.info(Wert)
 }
 }
}

Ergänzung: Vue-Lernhinweise: Die Rolle des $event-Objekts in Ereignissen

In Vue können dem Ereignis Klickereignisse oder andere Ereignisse hinzugefügt werden, um den DOM des Tag-Elements abzurufen oder die Attribute des Tags usw. zu ändern. Die spezifische Verwendung ist wie folgt:

1. Sie können das DOM-Element über $event abrufen

html:

<button data-get="Datenbutton" @click="getRvent($event)">Ereignisobjekt abrufen</button>

Lassen Sie uns zunächst das $event-Objekt drucken, um zu sehen, welche Eigenschaften es hat, wie unten gezeigt

Das srcElement ist das aktuelle Beschriftungselement und Sie können dieses Attribut verwenden, um das Beschriftungselement des aktuellen Klickereignisses abzurufen.

Beispielsweise können wir mit den erhaltenen Elementen genau wie mit nativem JS folgendermaßen operieren:

 // Holen Sie sich das Ereignisobjekt e
 getRvent(e){
  konsole.log(e);
  e.srcElement.style.background="rot";
 }

Vor dem Klicken:

Nach dem Klicken:

2. Darüber hinaus können wir auch die Eigenschaften des Tags selbst ändern, z. B. den Textwert einer Schaltfläche ändern. Zu diesem Zeitpunkt verwenden wir den Textinhalt unter $event, um ihn zu ändern.

Bevor Sie auf die Schaltfläche klicken:

Nach dem Klicken auf die Schaltfläche:

3. Wir können den Attributwert der Tag-Anpassung auch über $event wie folgt abrufen:

HTML Quelltext:

<button data-get="Datenbutton" @click="getRvent($event)">Ereignisobjekt abrufen</button>

Dieses Button-Tag verfügt über ein benutzerdefiniertes Attribut „data-get“. Derzeit können wir es entsprechend dem Attribut „target.dataset.get“ von $event abrufen.

Sie können es wie folgt auf der Konsole ausdrucken:

Tatsächlich können wir manchmal die Attribute des Elements selbst verwenden, um Operationen auszuführen, Operationen wie das Hinzufügen von Klassen aufzugeben, Code-Redundanz zu reduzieren und den Code zu verfeinern.

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Sollten dennoch Fehler oder unvollständige Überlegungen vorliegen, freue ich mich über eine Korrektur.