Vues Methoden für den Zugriff auf Elemente und Komponenten (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Methode zum Zugriff auf Elemente und Komponenten in Vue (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist.

Zugriff auf die Root-Instanz

In der untergeordneten Komponente jeder neuen Vue-Instanz kann über die Eigenschaft $root auf deren Root-Instanz zugegriffen werden.
Beispiel:

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

Alle Unterkomponenten können auf diese Instanz zugreifen oder sie als globalen Store verwenden.

/ 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()

Hinweis:
Dies ist praktisch für Demos oder sehr kleine Anwendungen mit einer kleinen Anzahl von Komponenten. Für mittlere und große Anwendungen ist dieses Modell jedoch nicht geeignet. Daher empfehlen wir in den meisten Fällen dringend, Vuex zur Verwaltung des Anwendungsstatus zu verwenden.

Zugriff auf die Instanz der übergeordneten Komponente

Ähnlich wie bei $root kann das Attribut $parent verwendet werden, um von einer untergeordneten Komponente aus auf die Instanz der übergeordneten Komponente zuzugreifen. Es bietet die Möglichkeit, jederzeit später auf die übergeordnete Komponente zuzugreifen, anstatt Daten in Form von Requisiten an die untergeordnete Komponente zu übergeben.
Hinweis:

在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

## Zugriff auf Unterkomponenteninstanzen oder Unterelemente ##
Trotz der Existenz von Requisiten und Ereignissen müssen Sie manchmal immer noch direkt in Javascript auf eine Unterkomponente zugreifen. Um dies zu erreichen, können Sie der Unterkomponente über das ref-Attribut eine ID-Referenz zuweisen. Zum Beispiel:

<base-input ref="usernameInput"></base-input>

Jetzt können Sie in der Komponente, in der Sie diesen Verweis definiert haben, Folgendes verwenden:

this.$refs.usernameInput

, um für Notfälle auf diese -Instanz zuzugreifen.
Wenn ref mit v-for verwendet wird, ist die Referenz, die Sie erhalten, ein Array, das diese Unterkomponenten der entsprechenden Datenquelle enthält.
Hinweis:

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

Abhängigkeitsinjektion

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

In dieser Komponente müssen alle Nachkommen von auf eine getMap-Methode zugreifen, um zu wissen, mit welcher Karte sie interagieren sollen. Leider lässt sich die Verwendung des Attributs $parent nicht gut auf tiefer verschachtelte Komponenten skalieren. Hier kommt die Abhängigkeitsinjektion ins Spiel, die zwei neue Instanzeigenschaften verwendet: „provide“ und „inject“. Mit der Option
provide können wir die Daten/Methoden angeben, die wir den Nachkommenkomponenten bereitstellen möchten. In diesem Beispiel handelt es sich um die getMap-Methode in :

provide(){
    return{
        getMap:this.getMap
    }
}

Dann können wir in jeder Nachkommenkomponente die Option „inject“ verwenden, um den angegebenen Inhalt zu empfangen, den wir dieser Instanz hinzufügen möchten :

inject:['getMap']

Im Vergleich zu $parent ermöglicht uns diese Verwendung den Zugriff auf getMap in jeder Nachkommenkomponente, ohne die gesamte -Instanz verfügbar zu machen. Dadurch können wir die Komponente besser weiterentwickeln, ohne befürchten zu müssen, dass wir etwas ändern/entfernen, von dem Unterkomponenten abhängen. Dabei sind die Schnittstellen zwischen diesen Komponenten immer klar definiert, genau wie bei Requisiten.
Die Vorgängerkomponente muss nicht wissen, welche Nachkommenkomponenten die von ihr bereitgestellten Eigenschaften verwenden.
Die Nachkommenkomponente muss nicht wissen, woher die injizierten Eigenschaften stammen.
Hinweis:

Jedoch Abhängigkeit Die Injektion hat immer noch negative Auswirkungen. Dadurch wird Ihre Anwendung an die aktuelle Komponentenorganisation gekoppelt, was die Umgestaltung erschwert. Außerdem reagieren die bereitgestellten Eigenschaften nicht. Dies ist beabsichtigt, da ihre Verwendung zur Erstellung einer zentralisierten Skala nicht so gut ist wie die Verwendung von $root zu diesem Zweck. Wenn die Eigenschaft, die Sie teilen möchten, anwendungsspezifisch und nicht generisch ist oder Sie die bereitgestellten Daten in einer Vorgängerkomponente aktualisieren möchten, bedeutet dies, dass Sie möglicherweise zu einer echten Lösung wie der Vuex State-Verwaltungslösung wechseln müssen.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonVues Methoden für den Zugriff auf Elemente und Komponenten (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!