Vue3 ref-Attribut

Vue3 内置属性Vue3 integrierte Attribute

refDas Attribut wird verwendet, um Referenzinformationen für Elemente oder untergeordnete Komponenten zu registrieren, sodass im JavaScript-Code direkt auf DOM-Elemente oder Komponenteninstanzen zugegriffen werden kann.

Grundlegende Beschreibung

refEs ist ein wichtiger Weg, um DOM-Elemente oder Komponenteninstanzen in Vue zu erhalten. Es ermöglicht uns, nachdem die Vue-Instanz gemountet wurde, direkt das DOM zu manipulieren oder Methoden von Kindkomponenten aufzurufen.

  • Typ: String | Function
  • Zweck: Zugriff auf DOM-Elemente oder Instanzen von Kindkomponenten, um Vorgänge wie Fokussteuerung und Methodenaufrufe auszuführen.

Grundlegende Verwendung

1. Verwendung von ref in der Options API

In der Options API werden durch ref registrierte Referenzen in der Komponenteninstanz gespeichert$refsObjekt:

Beispiel

<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="focusInput">Eingabefeld fokussieren</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
// Zugriff auf DOM-Elemente über $refs
      this.$refs.inputField.focus()
    }
  }
}
</script>

2. Verwendung von ref in der Composition API

In der Composition API wird empfohlen,useTemplateRefum Template-Referenzen zu erhalten:

Beispiel

<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="focusInput">Eingabefeld fokussieren</button>
  </div>
</template>

<script setup>
import { useTemplateRef } from 'vue'

// Eine Referenz passend zum ref-Namen im Template erstellen
const inputField = useTemplateRef('inputField')

function focusInput() {
// Direkt auf das DOM-Element zugreifen
  inputField.value?.focus()
}
</script>

Anwendungsfälle

1. Zugriff auf DOM-Elemente

Mit ref können Sie direkt auf DOM-Elemente zugreifen, um Vorgänge wie Fokussteuerung und Wertabruf durchzuführen:

Beispiel

<template>
  <div>
    <input type="text" ref="username" placeholder="Benutzername" />
    <button @click="getValue">Wert abrufen</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
// Den Wert des Eingabefelds abrufen
      const value = this.$refs.username.value
console.log('input value:', value)
    }
  }
}
</script>

2. Zugriff auf Kindkomponenten-Instanzen

Mit ref können Sie auf eine Instanz einer Kindkomponente zugreifen, ihre Methoden aufrufen oder auf ihre Daten zugreifen:

Beispiel

<!-- Elternkomponente -->
<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Methode der Kindkomponente aufrufen</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
// Die Methode der Kindkomponente aufrufen
      this.$refs.childRef.sayHello()
// Auf die Daten der Kindkomponente zugreifen
console.log('Daten der Kindkomponente:', this.$refs.childRef.message)
    }
  }
}
</script>

3. Funktionale ref

ref kann auch eine Funktion akzeptieren, die bei jedem Update aufgerufen wird und volle Kontrolle darüber bietet, wo die Referenz gespeichert wird:

Beispiel

<template>
  <div>
    <input type="text" :ref="el => inputEl = el" />
    <button @click="focusInput">Fokussieren</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputEl: null
    }
  },
  methods: {
    focusInput() {
      this.inputEl?.focus()
    }
  }
}
</script>

Hinweise

Zeitpunkt der ref-Registrierung: Da ref selbst aus dem Ergebnis der Renderfunktion erstellt wird, muss darauf nach dem Mounten der Komponente zugegriffen werden. Wenncreatedman im Lifecycle-Hook darauf zugreift,$refswird es weiterhin ein leeres Objekt sein.

Nicht reaktiv：$refsEs ist nicht reaktiv, daher sollte es nicht für Datenbindung in Templates verwendet werden. Verwende es nur in JavaScript für DOM-Operationen.

Vermeide übermäßige Nutzung von ref: Steuere das DOM und untergeordnete Komponenten so weit wie möglich datengetrieben und durch Ereignisbehandlung. Übermäßige Nutzung von ref macht den Code schwer wartbar.

Beispiel

<!-- Nicht empfohlen: Zugriff auf ref in created -->
<script>
export default {
  created() {
    console.log(this.$refs.inputField) // undefined
  },
  mounted() {
console.log(this.$refs.inputField) // kann darauf zugegriffen werden
  }
}
</script>

Verwendung mit v-for

ref kann auch verwendet werden mitv-forv-for, das ein Array erstellt, das alle entsprechenden DOM-Elemente oder Komponenteninstanzen enthält:

Beispiel

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id" :ref="el => setItemRef(el, index)">
      {{ item.name }}
    </div>
    <button @click="logRefs">Alle Referenzen ausgeben</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
{ id: 1, name: 'Projekt 1' },
{ id: 2, name: 'Projekt 2' },
{ id: 3, name: 'Projekt Drei' }
      ],
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el, index) {
      if (el) {
        this.itemRefs[index] = el
      }
    },
    logRefs() {
console.log('Alle Referenzen:', this.itemRefs)
    }
  }
}
</script>

Vue3 内置属性Vue3 integrierte Attribute

Andere Erweiterungen