Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten

Vue verwendet Ref, um Komponenteninstanzen über Ebenen hinweg abzurufen

Beispieleinführung

Während des Entwicklungsprozesses werden wir zwangsläufig die ebenenübergreifende Referenzinstanzerfassung verwenden. In den meisten Fällen können wir die erforderliche Instanz über die eigenen parent oder children der Komponente finden. Wenn die Hierarchie jedoch unklar oder zu tief ist, ist diese Methode zwangsläufig umständlich und ineffizient.

Wie in der folgenden Abbildung gezeigt, verwenden wir組件E um die Komponenteninstanz von組件D zu erhalten.

Dokumentverzeichnisstruktur

Es gibt sechs Komponenten, nämlich A, B, C, D, E und Index, und sie werden in der Reihenfolge der Komponenten in der obigen Abbildung in die jeweiligen Seiten eingefügt.

Der Seitenstil ist wie folgt:

Installieren Sie vue-ref

vue-ref herunterladen

npm installiere vue-ref --save

Globale Registrierung

Importiere Ref von „vue-ref“
Vue.use(ref)

Anwendung

<!-- vm.dom wird der DOM-Knoten sein -->
<p v-ref="c => this.dom = c">hallo</p>

<!-- vm.child wird die untergeordnete Komponenteninstanz sein -->
<child-component v-ref="c => dieses.child = c"></child-component>

<span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>

Benutzerdefinierte Methode der Stammkomponente [mit „Provide“ und „Inject“]

Auf unserer Indexseite bieten wir drei Methoden an:

• Legen Sie die Instanz der untergeordneten Komponente fest, setChildrenRef
• Von Komponenteninstanz abrufen: getChildrenRef
• Holen Sie sich die aktuelle Knoteninstanz, getRef

bieten() {
  zurückkehren {
   setChildrenRef: (Name, Referenz) => {
    dies[Name] = ref
   },
   getChildrenRef: Name => {
    gib dies zurück[Name]
   },
   getRef: () => {
    gib das zurück
   }
  }
 },

Beschreiben Sie jede Seite einzeln

Seite Komponente A:

Holen Sie sich die Methode setChildrenRef über die Injektionsmethode und cachen Sie Komponente D über die obigen Anweisungen

Seite Komponente B:

Seite Komponente C:

Seite Komponente D:

Seite Komponente E:

Auf dieser Seite fügen wir nicht nur zwei Methoden ein, sondern legen auch eine Methode zum Ändern der Farbe der Komponente D fest, um zu testen, ob wir die Instanz der Komponente D wirklich über alle Ebenen hinweg erhalten haben.

Ergebnis

Wie Sie sehen, sind die drei übergeordneten Instanzen identisch und der Textstil der Komponente D wurde in Komponente E erfolgreich geändert. Gut!

Oben sind die Einzelheiten der Schritte aufgeführt, mit denen Vue Ref verwendet, um Komponenten über verschiedene Ebenen hinweg abzurufen. Weitere Informationen dazu, wie Vue Ref zum Abrufen von Komponenten verwendet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!