Vue-Fehler: Provide und inject können für die Abhängigkeitsinjektion nicht korrekt verwendet werden. Wie kann das Problem gelöst werden?

Vue-Fehler: Provide und inject können für die Abhängigkeitsinjektion nicht korrekt verwendet werden. Wie lässt sich das Problem beheben?

Während des Entwicklungsprozesses von Vue müssen wir häufig Daten oder Methoden zwischen Komponenten austauschen. Vue bietet verschiedene Möglichkeiten zur Implementierung der Komponentenkommunikation. Eine davon ist die Abhängigkeitsinjektion durch Bereitstellung und Injektion. Bei der Verwendung von Provide und Inject für die Abhängigkeitsinjektion treten jedoch manchmal Fehler auf. In diesem Artikel werden Lösungen für diese Probleme erläutert.

1. Fehlermeldung

Wenn wir Provide in der Komponente verwenden, um Daten bereitzustellen, und dann Inject in der Unterkomponente verwenden, um sie zu empfangen, wird manchmal die folgende Fehlermeldung angezeigt:

[Vue warn]: The inject key "xxx" is already provided in xxx

Diese Fehlermeldung bedeutet, dass Sie sich in der befinden Bei derselben Komponente wird derselbe Schlüsselname mehrmals angegeben.

2. Lösung

Wenn wir auf die obige Fehlermeldung stoßen, können wir sie mit den folgenden zwei Methoden lösen:

Methode 1: Überprüfen Sie den Standort der Bereitstellung.

Zuerst müssen wir bestätigen, ob der Standort der Bereitstellung korrekt ist . Der bereitgestellte Datenprovider muss eine übergeordnete Komponente sein und kann nur in Vorgängerkomponenten verwendet werden. Wenn der Speicherort von Provide falsch ist, z. B. wenn Provide zum Bereitstellen von Daten in einer untergeordneten Komponente oder einer Geschwisterkomponente verwendet wird, wird ein Fehler gemeldet.

Methode 2: Vermeiden Sie die wiederholte Bereitstellung desselben Schlüsselnamens.

In derselben Komponente kann derselbe Schlüsselname nicht mehrmals bereitgestellt werden. Wenn wir auf die obige Fehlermeldung stoßen, können wir sie auf zwei Arten lösen:

2.1 Verschiedene Schlüsselnamen verwenden

Sie können unterschiedliche Schlüsselnamen verwenden, um Daten in der Komponente bereitzustellen, die Daten bereitstellt. Das Folgende ist beispielsweise eine Komponente, die Daten bereitstellt:

// 提供数据的组件
export default {
  provide() {
    return {
      foo: 'bar'
    }
  },
  // ...
}

In der Komponente, die Daten empfängt, werden unterschiedliche Schlüsselnamen zum Empfangen verwendet:

// 接收数据的组件
export default {
  inject: {
    baz: { from: 'foo' }
  },
  // ...
}

Durch die obige Methode vermeiden wir die Verwendung desselben Schlüsselnamens in derselben Komponentenfrage mehrfach zur Verfügung gestellt.

2.2 Funktionskomponenten verwenden

Vues Funktionskomponenten bieten eine übersichtliche Möglichkeit zur Implementierung der Abhängigkeitsinjektion und vermeiden so das Problem der wiederholten Bereitstellung desselben Schlüsselnamens. In Funktionskomponenten können Sie Provide und Inject direkt für die Abhängigkeitsinjektion verwenden, ohne sich Gedanken über die wiederholte Bereitstellung von Schlüsselnamen machen zu müssen. Das Folgende ist ein Beispiel für die Verwendung von Funktionskomponenten zur Implementierung der Abhängigkeitsinjektion:

// 函数式组件
export default Vue.extend({
  functional: true,
  provide() {
    return {
      foo: 'bar'
    }
  },
  inject: ['foo'],
  // ...
})

Mit der oben genannten Methode lösen wir das Problem der wiederholten Bereitstellung von Schlüsselnamen bei der Verwendung von Provide und Inject für die Abhängigkeitsinjektion.

Zusammenfassung:

In Vue ist die Abhängigkeitsinjektion mithilfe von Provide und Inject eine sehr praktische Möglichkeit der Komponentenkommunikation. Allerdings stoßen wir während der Nutzung manchmal auf Fehlermeldungen. In diesem Artikel werden zwei Methoden verwendet, nämlich die Überprüfung des Bereitstellungsorts und die Vermeidung der wiederholten Bereitstellung desselben Schlüsselnamens, um diese Fehlermeldungen zu beheben. Ich hoffe, dass dieser Artikel Ihnen bei der Lösung der Probleme bei der Verwendung von Provide und Inject für die Abhängigkeitsinjektion helfen kann.

Das obige ist der detaillierte Inhalt vonVue-Fehler: Provide und inject können für die Abhängigkeitsinjektion nicht korrekt verwendet werden. Wie kann das Problem gelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!