Vue3 integrierte Attribute

In Vue.js sind is, key und ref drei häufig verwendete integrierte Attribute, die wie folgt verwendet werden.

Attribute Kernfunktion Verwendung/Beispiel
is Löst Einschränkungen der HTML-Tag-Syntax, gibt dynamisch das zu rendernde Komponenten-/native Tag an

<tag is="component-name">
<component :is="variable">

<ul><li is="my-component"></li></ul>
key Stellt dem virtuellen DOM von Vue eine eindeutige Kennung bereit, verbessert die Effizienz beim Rendern von Listen und gewährleistet den korrekten Komponentenzustand <tag key="unique-value">
<tag :key="item.id">
<div v-for="item in list" :key="item.id">{{item}}</div>
ref Ruft ein DOM-Element oder eine Komponenteninstanz ab, wird verwendet, um direkt das native DOM zu manipulieren / Methoden untergeordneter Komponenten aufzurufen Vorlage: ref="name"
Skript: this.$refs.name
<input ref="inputRef">
this.$refs.inputRef.focus()

is 属性

In Vue.js wird das Attribut is typischerweise für die Implementierung dynamischer Komponenten verwendet, besonders nützlich, wenn Sie zur Laufzeit dynamisch zwischen verschiedenen Komponenten wechseln möchten.

  • Typ: String oder Object
  • Zweck: isDas Attribut wird verwendet, um dynamisch die aktuelle<component>Komponente anzugeben, die festlegt, welche untergeordnete Komponente gerendert werden soll. Normalerweise kombiniert mit<component>dem `component`-Element und dynamischen Komponentenfunktionen, mit denen Sie zur Laufzeit basierend auf Daten zwischen verschiedenen Komponenten wechseln können.

Beispiel

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Komponente umschalten</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

Im obigen Code,currentComponentist eine Dateneigenschaft, die bestimmt<component>welche spezifische Komponente das Element rendern soll. Wenn auf die Schaltfläche geklickt wird, wird durch AufrufentoggleComponentder Methode wird der Wert umgeschaltetcurrentComponent, wodurch die gerenderte Komponente dynamisch geändert wird.

Hinweis:

  • Hinweise:
    • isDer Wert des Attributs kann entweder ein String mit dem Komponentennamen oder ein Komponentenobjekt sein.
    • Bei Verwendung eines Strings sollte der Komponentenname mit dem registrierten Komponentennamen übereinstimmen.
    • Wenn ein Objekt verwendet wird, können Sie direkt auf das Komponentenobjekt verweisen oder eine dynamische berechnete Eigenschaft verwenden, um das Komponentenobjekt zurückzugeben.

key 属性

  • Typ: String oder Number

  • ZweckBeim Rendern von Listen in Vue.js muss jedesv-forElement in einer Schleife einen eindeutigen habenkeyAttributs.keyDie Rolle von `key` besteht darin, Vue dabei zu helfen, die Eindeutigkeit jedes Knotens zu identifizieren, wodurch das virtuelle DOM effizient aktualisiert wird. Wenn Vue die Liste neu rendert, wird es auf Grundlage vonkeyentscheiden, ob vorhandene DOM-Elemente wiederverwendet oder neu erstellt werden.

    Beispiel

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    Im obigen Code,item.idaskeydas Attribut, das sicherstellt, dass jedes Listenelement bei Datenaktualisierungen von Vue korrekt identifiziert und verarbeitet werden kann.

  • Hinweise:

    • keyEr sollte eindeutig und stabil sein. Stabil bedeutet,keyer sollte sich nicht ändern, wenn sich die Daten ändern; andernfalls beeinträchtigt dies die Leistung von Vue und die Wiederverwendungsstrategie des virtuellen DOM.
    • Vermeiden Sie die Verwendung von index alskeyes sei denn, Sie wissen explizit, dass sich die Reihenfolge der Listenelemente nicht ändern wird.

ref 属性

  • Typ: String oder Object

  • Zweck: refEs wird verwendet, um Referenzinformationen für Elemente oder untergeordnete Komponenten zu registrieren. In der tatsächlichen Entwicklung können Sierefum auf bestimmte DOM-Elemente oder Instanzen untergeordneter Komponenten zuzugreifen und dadurch Operationen wie das Aufrufen von Methoden, den Zugriff auf Eigenschaften usw. auszuführen.

Hinzufügen von ref zu einem DOM-Element

Beispiel

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // auf DOM-Element zugreifen
this.$refs.inputField.focus(); // Methode des DOM-Elements aufrufen
  }
}
</script>

ref zu einer Kindkomponente hinzufügen

Beispiel

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
console.log(this.$refs.childRef); // Zugriff auf die Kindkomponenten-Instanz
this.$refs.childRef.doSomething(); // Methode der Kindkomponente aufrufen
  }
}
</script>

Hinweise:

  • Bei der Verwendung im Template,refVue stellt ein entsprechendes$refsObjekt bereit, über das Sie auf das registrierte DOM-Element oder die Kindkomponenten-Instanz zugreifen können.
  • Vermeiden Sie die übermäßige Nutzung von `ref`ref, und arbeiten Sie so weit wie möglich über datengetriebene Ansätze und Ereignisbehandlung mit DOM und Kindkomponenten, um den Code wartbar und klar zu halten.
Andere Erweiterungen