So verwenden Sie Provide/Inject in Vue, um Daten zwischen Vorgängerkomponenten und Nachkommenkomponenten zu übertragen

In Vue müssen wir häufig Daten zwischen Komponenten übertragen. Bei der Weitergabe von Daten zwischen Vorgängerkomponenten und Nachkommenkomponenten können wir die von Vue bereitgestellte Bereitstellung/Injektion verwenden.

1. Die Rolle von Provide/Inject

In Vue sind Provide und Inject zwei APIs, die für die Datenübertragung zwischen Vorfahren und Nachkommen verwendet werden.

Im Speziellen wird „provide“ verwendet, um einige Daten/Methoden zu definieren, die in Vorgängerkomponenten gemeinsam genutzt werden müssen, während „inject“ verwendet wird, um diese Daten/Methoden in untergeordnete Komponenten einzufügen.

Auf diese Weise können die in der Vorgängerkomponente bereitgestellten Daten/Methoden von der Nachkommenkomponente verwendet werden, wodurch die Datenübertragung gut realisiert wird.

2. Verwendung von Provide/Inject

Lassen Sie uns nun einen Blick auf die Verwendung von Provide/Inject werfen.

In Vorgängerkomponenten können wir Provide verwenden, um die Daten/Methoden zu definieren, die gemeinsam genutzt werden müssen, zum Beispiel:

provide: {
  theme: 'blue',
  changeTheme: theme => {
    this.theme = theme
  }
}

In diesem Beispiel definieren wir eine Designvariable und eine changeTheme-Methode und geben sie über Provide-Komponenten an Nachkommen weiter .

In Nachkommenkomponenten können wir inject verwenden, um diese Daten/Methoden zu empfangen, zum Beispiel:

inject: ['theme', 'changeTheme']

In diesem Beispiel erhalten wir die beiden Daten/Methoden theme und changeTheme durch inject.

Auf diese Weise können wir die beiden Daten/Methoden theme und changeTheme in abgeleiteten Komponenten verwenden.

this.theme // 获取theme变量的值
this.changeTheme('red') // 改变主题色

Es ist zu beachten, dass wir bei der Verwendung von „inject“ zum Einfügen von Daten/Methoden diese nicht mit den von „prove“ definierten Namen benennen müssen. Bei Bedarf können wir einen semantischeren Namen wählen.

Außerdem ist zu beachten, dass Sie bei Verwendung von Provide/Inject sicherstellen müssen, dass die Vorgängerkomponente vor der Nachkommenkomponente erstellt wird, da sonst die Daten/Methode nicht injiziert werden können. Dies kann grundsätzlich durch die Reihenfolge der Komponentenerstellung sichergestellt werden.

3. Beispielcode

Schauen wir uns nun einen vollständigen Beispielcode an, um besser zu verstehen, wie Provide/Inject verwendet wird.

Übergeordnete Komponente:

<template>
  <div>
    <h3>当前主题色为{{theme}}</h3>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
    <hr>
    <child></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  provide() {
    return {
      theme: this.theme,
      changeTheme: this.changeTheme
    }
  },
  data() {
    return {
      theme: 'blue'
    }
  },
  methods: {
    changeTheme(theme) {
      this.theme = theme
    }
  }
}
</script>

Untergeordnete Komponente:

<template>
  <div>
    <h3>我是子组件</h3>
    <p>当前主题色为：{{theme}}</p>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
  </div>
</template>

<script>
export default {
  inject: ['theme', 'changeTheme'],
  mounted() {
    console.log(this.theme) // blue
  },
  methods: {
    changeTheme(theme) {
      this.changeTheme(theme)
    }
  }
}
</script>

In diesem Beispiel definieren wir eine Designvariable und eine changeTheme-Methode in der übergeordneten Komponente und geben sie über Provide an die untergeordnete Komponente weiter.

In der Unterkomponente erhalten wir die beiden Daten/Methoden theme und changeTheme über inject und ändern die Themenfarbe über die Methode changeTheme.

4. Zusammenfassung

Durch die Verwendung von Provide/Inject kann eine Datenübertragung zwischen Vorgängerkomponenten und Nachkommenkomponenten effektiv erreicht werden. Bei der Verwendung müssen wir nur die Daten/Methoden definieren, die in der Vorgängerkomponente gemeinsam genutzt werden müssen, und sie dann in die Nachkommenkomponente einfügen.

Es ist zu beachten, dass Sie bei Verwendung von Provide/Inject sicherstellen müssen, dass die Vorgängerkomponente vor der Nachkommenkomponente erstellt wird, da sonst die Daten/Methode nicht injiziert werden können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Provide/Inject in Vue, um Daten zwischen Vorgängerkomponenten und Nachkommenkomponenten zu übertragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!