Einführung und Anwendungsbeispiele von ref und $refs in Vue

Vorwort

In JavaScript müssen Sie document.querySelector("#demo") verwenden, um den DOM-Knoten abzurufen und dann den Wert dieses Knotens abzurufen. In Vue müssen wir den DOM-Knoten nicht abrufen. Nachdem das Element an ref gebunden ist, kann es direkt über this.$refs aufgerufen werden, was den Aufwand zum Abrufen des DOM-Knotens reduzieren kann.

ref Einführung

Mit „ref“ werden Referenzinformationen für ein Element oder eine Unterkomponente registriert. Die Referenzinformationen werden im $refs-Objekt der übergeordneten Komponente registriert. Bei Verwendung auf einem normalen DOM-Element verweist die Referenz auf das DOM-Element. Bei Verwendung auf einer Unterkomponente verweist die Referenz auf die Instanz der Unterkomponente.

Einfach ausgedrückt besteht die Ref-Funktion darin, einem Element oder einer Unterkomponente eine ID-Referenz zuzuweisen und über this.$refs.refName auf die Instanz des Elements oder der Unterkomponente zuzugreifen.

<p ref="p">Hallo</p>
<Kinder ref="Kinder"></Kinder>

dies.$refs.p
dies.$refs.children

this.$refs Einführung

this.$refs ist ein Objekt, das alle DOM-Elemente und Unterkomponenteninstanzen enthält, die in der aktuellen Komponente registrierte Ref-Attribute haben

Hinweis: $refs werden erst nach dem Rendern der Komponente ausgefüllt. Sie können während des ersten Renderns nicht darauf zugreifen. Außerdem reagieren sie nicht, sodass Sie sie nicht für die Datenbindung in Vorlagen verwenden können.

Beachten:

Wenn ref mit v-for verwendet wird, ist die erhaltene Referenz ein Array, das die Loop-Array-Quelle enthält

<Vorlage>
 <div>
 <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
  arr: ['eins', 'zwei', 'drei', 'vier']
 }
 },
 montiert() {
 Konsole.log(diese.$refs.myDiv)
 },
 Methoden: {}
}
</Skript>
 
<style lang="sass" scoped>
 
</Stil> 

Instanz (Aufruf der Methode der untergeordneten Komponente über das Ref-Attribut)

【1】Unterkomponentencode:

<Vorlage>
 <div>{{msg}}</div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
  msg: „Ich bin eine untergeordnete Komponente“
 }
 },
 Methoden: {
 Änderungsnachricht() {
  this.msg = "Transformation"
 }
 }
}
</Skript>
 
<style lang="sass" scoped></style>

【2】Code der übergeordneten Komponente:

<Vorlage>
 <div @click="übergeordneteMethode">
 <Kinder ref="Kinder"></Kinder>
 </div>
</Vorlage>
 
<Skript>
Importiere untergeordnete Elemente aus „components/children.vue“
Standard exportieren {
 Komponenten: 
 Kinder 
 },
 Daten() {
 zurückkehren {}
 },
 Methoden: {
 übergeordneteMethode() {
  this.$refs.children //Gibt ein Objekt zurück this.$refs.children.changeMsg() //Ruft die changeMsg-Methode der untergeordneten Elemente auf}
 }
}
</Skript>
 
<style lang="sass" scoped></style>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Einführung und Verwendung von ref und $refs in Vue. Weitere Informationen zur Verwendung von ref und $refs in Vue 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!