Tipps zur Verwendung von Provide und Inject, um Daten über Ebenen in Vue zu übertragen

Tipps für die Verwendung von Provide und Inject, um Daten über Ebenen in Vue zu übertragen

Bei der Entwicklung von Vue ist die Übertragung von Daten zwischen Komponenten eine sehr häufige Anforderung. Normalerweise können wir Daten zwischen Komponenten über Props- und Emit-Methoden übertragen, aber wenn es mehrere Verschachtelungsebenen zwischen Komponenten gibt, wird diese Methode umständlicher und es kann sehr leicht zu Codekopplung kommen. Zu diesem Zeitpunkt kann das Bereitstellen und Injizieren in Vue nützlich sein.

Provide und Inject sind neue Funktionen, die in Vue Version 2.2.0 eingeführt wurden. Diese beiden APIs können den Vorgang der schichtweisen Weitergabe von Daten problemlos implementieren. Im folgenden Beispiel verwenden wir ein Beispiel mit mehreren Ebenen verschachtelter Komponenten, um zu demonstrieren, wie wir Provide und Inject verwenden, um eine ebenenübergreifende Datenübertragung zu erreichen.

Angenommen, wir haben die folgenden mehrschichtigen verschachtelten Komponenten:

<template>
  <div>
    <child1></child1>
  </div>
</template>

<script>
import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};
</script>

<template>
  <div>
    <child2></child2>
  </div>
</template>

<script>
import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
    <grandchild></grandchild>
  </div>
</template>

<script>
import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In diesem Beispiel hoffen wir, die in der Parent-Komponente definierten Nachrichtendaten in der Grandchild-Komponente zu erhalten. Das Folgende ist die spezifische Implementierung:

Verwenden Sie das Provide-Attribut in der Parent-Komponente, um die Daten bereitzustellen, die übergeben werden müssen:

<template>
  <div>
    <child1 :message="message"></child1>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello Vue!'
  }
};
</script>

Verwenden Sie das Inject-Attribut in der Grandchild-Komponente, um die von Provide:

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In bereitgestellten Daten einzufügen Auf diese Weise kann die Grandchild-Komponente problemlos die in der Parent-Komponente bereitgestellten Nachrichtendaten abrufen.

Zusätzlich zur Verwendung fester Daten in Provide und Inject können wir auch Methoden in Provide und Inject verwenden, um Daten bereitzustellen und abzurufen. Stellen Sie beispielsweise in der Parent-Komponente eine Methode bereit, um die Nachrichtendaten dynamisch festzulegen:

<template>
  <div>
    <child1 :set-message="setMessage"></child1>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Rufen Sie die setMessage-Methode in der Child1-Komponente auf, um die Nachrichtendaten festzulegen:

<template>
  <div>
    <child2 :message="message"></child2>
    <button @click="setMessage">Set Message</button>
  </div>
</template>

<script>
export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

Injizieren Sie die setMessage-Methode über das inject-Attribut in der Grandchild-Komponente:

<template>
  <div>
    <p>{{message}}</p>
    <button @click="setMessage">Set Parent Message</button>
  </div>
</template>

<script>
export default {
  inject: ['setMessage', 'message']
};
</script>

Dadurch kann die Grandchild-Komponente die setMessage-Methode in der Parent-Komponente aufrufen, um die Nachrichtendaten dynamisch festzulegen.

Zusammenfassung:

Durch die Verwendung der Provide- und Inject-Attribute können wir den Zweck der Datenweitergabe über Ebenen hinweg leicht erreichen. Bei der Verwendung dieser beiden Eigenschaften müssen Sie darauf achten, tiefe Verschachtelungen und Komponentenkopplungen zu vermeiden, um die Ziele der Einfachheit und Wartbarkeit des Codes zu erreichen.

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von Provide und Inject, um Daten über Ebenen in Vue zu übertragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!