So beheben Sie den Vue-Fehler: Bereitstellung und Injektion können für die Abhängigkeitsinjektion nicht korrekt verwendet werden

So lösen Sie den Vue-Fehler: Provide und inject können für die Abhängigkeitsinjektion nicht korrekt verwendet werden

Vue.js ist ein progressives Framework auf Basis von JavaScript, das die Idee der Komponentisierung nutzt, um die Front-End-Entwicklung zu implementieren. In Vue.js verwenden wir häufig Provide und Inject für die Abhängigkeitsinjektion zwischen Komponenten. Aber manchmal kann es vorkommen, dass wir auf einen Fehler stoßen, der Provide und Inject für die Abhängigkeitsinjektion nicht korrekt verwenden kann. In diesem Artikel wird die Ursache dieses Fehlers erläutert und wie er behoben werden kann.

Problembeschreibung

Wenn wir „prove“ in der übergeordneten Komponente verwenden, um einen Wert bereitzustellen, und „inject“ in der untergeordneten Komponente verwenden, um den Wert zu empfangen, tritt manchmal ein Fehler auf: Provide/inject should not be used with React render functions. Die spezifische Fehlermeldung kann variieren, aber die allgemeine Bedeutung ist, dass Sie Provide und Inject nicht für die Abhängigkeitsinjektion verwenden sollten, wenn Sie die Rendering-Funktionen von React verwenden.

Ursache des Problems

Der Grund für diesen Fehler liegt darin, dass Vue.js den Typ der Rendering-Funktion überprüft, wenn Provide und Inject für die Abhängigkeitsinjektion verwendet werden. Wenn die Renderfunktion auf React basiert, wird Vue.js denken, dass die Verwendung von Provide und Inject falsch ist, da es in React andere Möglichkeiten zur Abhängigkeitsinjektion gibt.

Lösung

Die Lösung für dieses Problem ist einfach: Wir müssen lediglich andere von Vue.js bereitgestellte Methoden für die Abhängigkeitsinjektion verwenden. Hier sind einige mögliche Lösungen.

1. Props

Eine sehr einfache Methode ist die Verwendung von Props für die Datenübertragung. In der übergeordneten Komponente können die einzufügenden Daten über Requisiten an die untergeordnete Komponente übergeben werden. In untergeordneten Komponenten können diese Daten über this.$props abgerufen werden.

Hier ist ein Beispielcode:

// 父组件
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ $props.message }}</p>
  </div>
</template>

2 $attrs und $listeners

Eine andere Möglichkeit ist die Verwendung der Attribute $attrs und $listeners. Das Attribut $attrs kann Attribute in der übergeordneten Komponente, die nicht von den Requisiten der untergeordneten Komponente empfangen werden, an die untergeordnete Komponente übergeben, und das Attribut $listeners kann Ereignisse in der übergeordneten Komponente an die untergeordnete Komponente übergeben.

Das Folgende ist ein Beispielcode:

// 父组件
<template>
  <div>
    <ChildComponent v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ $attrs.message }}</p>
    <button @click="$listeners.click">点击我</button>
  </div>
</template>

3. EventBus

Eine andere Methode besteht darin, EventBus zum Übermitteln von Ereignissen zu verwenden. In Vue.js können wir die Kommunikation zwischen Komponenten erreichen, indem wir einen globalen EventBus erstellen.

Das Folgende ist ein Beispielcode:

// EventBus.js
import Vue from 'vue';
export default new Vue();

// 父组件
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello World');
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('message', (message) => {
      this.message = message;
    });
  }
};
</script>

Zusammenfassung

In Vue.js verwenden wir häufig Provide und Inject für die Abhängigkeitsinjektion, aber manchmal stoßen wir auf Probleme, die dazu führen, dass Provide und Inject nicht korrekt verwendet werden können. In diesem Artikel werden die Ursache dieses Problems und drei Lösungen vorgestellt: Verwendung von Requisiten, $attrs und $listeners sowie EventBus. Ich hoffe, dieser Artikel kann Ihnen helfen, dieses Problem zu lösen und Ihre technischen Fähigkeiten bei der Vue.js-Entwicklung zu verbessern.

Das obige ist der detaillierte Inhalt vonSo beheben Sie den Vue-Fehler: Bereitstellung und Injektion können für die Abhängigkeitsinjektion nicht korrekt verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!