Vue3 app.provide()-Funktion

Vue3 全局 APIVue3 Global API

app.provide()Es ist eine sehr wichtige Funktion, die es uns ermöglicht, Daten oder Methoden auf der obersten Ebene der Anwendung bereitzustellen, wodurch diese Daten oder Methoden in jeder Komponente der gesamten Anwendung zugänglich und nutzbar werden.

Indem Sieapp.provide()undinjectder Kombination können wir problemlos Daten zwischen mehreren Komponenten teilen und so das umständliche Weitergeben von Props und Events vermeiden.

1. Was istapp.provide()？

app.provide()Es ist ein in Vue3 bereitgestellter Dependency-Injection-Mechanismus. Dadurch können wir einige globale Daten oder Methoden auf der obersten Ebene der Anwendung definieren und dann in jeder untergeordneten Komponente durchinjectum diese Daten oder Methoden zu erhalten. Dieser Ansatz eignet sich sehr gut, um Daten oder Funktionalität zwischen mehreren Komponenten zu teilen, ohne sie Ebene für Ebene über Props oder Events weitergeben zu müssen.

1.1 Warum brauchen wir esapp.provide()？

In großen Vue-Anwendungen müssen wir oft Daten oder Methoden zwischen mehreren Komponenten teilen. Wenn wir diese Daten über Props oder Events weitergeben, wird der Code komplex und schwierig zu warten. Jedoch,app.provide()bietet es eine prägnantere und effizientere Möglichkeit, dieses Problem zu lösen.

2. app.provide()Die grundlegende Syntax von

app.provide()Ihre grundlegende Syntax ist sehr einfach; sie akzeptiert zwei Parameter:

Beispiel

app.provide(key, value)
  • key: ein String oder Symbol, das verwendet wird, um die bereitgestellten Daten oder die bereitgestellte Methode zu identifizieren.
  • value: die Daten oder Methode, die bereitgestellt werden sollen; dies kann ein Wert eines beliebigen Typs sein, einschließlich Objekten, Funktionen usw.

3. Verwendungapp.provide()？

3.1 Daten oder Methoden auf der obersten Ebene der Anwendung bereitstellen

Zuerst müssen wir es auf der obersten Ebene der Anwendung verwendenapp.provide()um Daten oder Methoden bereitzustellen. Üblicherweise inmain.jsdie Datei, in der die Konfiguration durchgeführt wird:

Beispiel

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Globale Daten bereitstellen
app.provide('message', 'Hello, Vue3!')

// Globale Methode bereitstellen
app.provide('logMessage', (msg) => {
  console.log(msg)
})

app.mount('#app')

Im obigen Code verwenden wirapp.provide()um einen String bereitzustellen'Hello, Vue3!'und eine MethodelogMessage。

3.2 Verwendung in untergeordneten KomponenteninjectDaten oder Methoden abrufen

In untergeordneten Komponenten können wirinjectum die auf oberster Ebene der Anwendung bereitgestellten Daten oder Methoden abzurufen. Zum Beispiel:

Beispiel

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="log">Klick mich</button>
  </div>
</template>

<script>
export default {
  inject: ['message', 'logMessage'],
  methods: {
    log() {
      this.logMessage('Der Button wurde geklickt!')
    }
  }
}
</script>

In dieser Komponente haben wir durchinjecterhaltenmessageundlogMessage, und verwenden sie im Template und in Methoden.

4. Praktisches Anwendungsbeispiel

Angenommen, wir entwickeln ein Benutzerverwaltungssystem und müssen aktuelle Benutzerinformationen über mehrere Komponenten hinweg teilen. Wir könnenapp.provide()um Benutzerinformationen bereitzustellen und sie in den Komponenten abzurufen und zu verwenden, die sie benötigen.

4.1 Benutzerinformationen auf oberster Ebene der Anwendung bereitstellen

Beispiel

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Aktuelle Benutzerinformationen bereitstellen
app.provide('currentUser', {
  name: 'Zhang San',
  age: 25,
  email: 'zhangsan@example.com'
})

app.mount('#app')

4.2 Benutzerinformationen in untergeordneten Komponenten verwenden

Beispiel

<template>
  <div>
    <h1>Benutzerinformationen</h1>
    <p>Name: {{ user.name }}</p>
    <p>Alter: {{ user.age }}</p>
    <p>E-Mail: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  inject: ['currentUser'],
  berechnet: {
    user() {
      return this.currentUser
    }
  }
}
</script>

Auf diese Weise können wir Benutzerinformationen einfach über mehrere Komponenten hinweg teilen und verwenden, ohne sie jedes Mal über Props übergeben zu müssen.

Weitere Erweiterungen