Wie rufen öffentliche Vue-Methoden andere Komponentenmethoden auf?

In Vue ist die Komponentenkommunikation ein sehr kritisches Thema. Eine Komponente muss möglicherweise die Methode einer anderen Komponente aufrufen, um ihre eigenen Funktionen zu implementieren. In diesem Fall müssen wir einige technische Mittel verwenden, um die Kommunikation zwischen Komponenten zu erreichen.

Vue bietet viele Methoden zum Implementieren der Kommunikation zwischen Komponenten, einschließlich Ereignisbus, Vuex, Requisiten, Emittieren usw. Wenn wir jedoch Methoden anderer Komponenten in öffentlichen Methoden aufrufen müssen, kann die Verwendung dieser Methoden kompliziert und mühsam werden. Zu diesem Zeitpunkt können wir $root und $refs in der Vue-Instanz verwenden, um andere Komponentenmethoden aufzurufen.

$root und $refs sind zwei Eigenschaften der Vue-Instanz, die es uns ermöglichen, von einer anderen Komponente aus auf eine Komponente zuzugreifen. $root ist die Root-Vue-Instanz und kann auf die gesamte Vue-Anwendung zugreifen. $refs ist ein Objekt, das alle Unterkomponenten mit ref-Attributen enthält.

Zuerst müssen wir eine Methode in einer anderen Komponente definieren und dieser Komponente in der Vorlage ein Ref-Attribut hinzufügen. Zum Beispiel:

<template>
  <div>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$emit('increment')
      }
    }
  }
</script>

Hier definieren wir eine Inkrementierungsmethode und binden sie an eine Schaltfläche. Wenn auf die Schaltfläche geklickt wird, löst die Inkrementierungsmethode ein benutzerdefiniertes Ereignis „Inkrement“ aus. Gleichzeitig geben wir diese Komponente als untergeordneten Knoten ihrer übergeordneten Komponente an und fügen ihr ein ref-Attribut hinzu.

Als nächstes können wir in der übergeordneten Komponente über das Attribut $refs auf die untergeordnete Komponente zugreifen und deren Methoden aufrufen. Zum Beispiel:

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    created() {
      console.log(this.$refs.child)
      this.$refs.child.increment()
    }
  }
</script>

Hier erstellen wir eine übergeordnete Komponente und fügen der Vorlage eine untergeordnete Komponente ChildComponent hinzu. Gleichzeitig erhalten wir über this.$refs.child die Instanz der untergeordneten Komponente und rufen deren Inkrementierungsmethode auf. Wir rufen $refs im erstellten Hook auf, da die Unterkomponente bei Verwendung des gemounteten Hooks noch nicht erstellt wurde.

Auf diese Weise können wir problemlos Methoden anderer Komponenten in öffentlichen Methoden aufrufen. Wir müssen lediglich die entsprechende Komponenteninstanz über $root oder $refs in der öffentlichen Methode abrufen und deren Methode direkt aufrufen.

Es ist zu beachten, dass $refs ein nicht reagierendes Objekt ist und nur gefüllt wird, wenn die Komponente gerendert wird, also wenn wir die Instanz der Unterkomponente abrufen müssen, bevor die Komponente gerendert wird , können wir das Attribut $children verwenden.

Zusammenfassend lässt sich sagen, dass der Aufruf anderer Komponenten über $root und $refs eine sehr bequeme und praktische Methode ist. Wir müssen jedoch auf einige Details achten, z. B. ob die Komponente gerendert wurde, ob ein Ref-Attribut vorhanden ist usw. Diese Methode kann eine gute Lösung bieten, wenn wir andere Komponentenmethoden in öffentlichen Methoden aufrufen müssen.

Das obige ist der detaillierte Inhalt vonWie rufen öffentliche Vue-Methoden andere Komponentenmethoden auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!