Vue3 provide-Funktion

Vue3 选项式 APIVue3 Options API

provideDie Funktion ist eine von Vue3 bereitgestellte Funktion höherer Ordnung, die verwendet wird, um Daten im Komponentenbaum von übergeordneten Komponenten an untergeordnete Komponenten zu übergeben. Im Vergleich zu traditionellenpropsverglichen,provideundinjectbietet sie eine flexiblere Möglichkeit, Daten zu teilen, insbesondere wenn die Komponentenhierarchie tief ist.

Verwendungprovideder Funktion kann die übergeordnete Komponente der untergeordneten Komponente dadurch einige Daten oder Methoden bereitstellen, und die untergeordnete Komponente kann durchinjectdie Funktion, um diese Daten oder Methoden zu empfangen.

Grundlegende Verwendung der provide-Funktion

Nachfolgend sehen Sie ein einfaches Beispiel, das zeigt, wie manprovidedie Funktion zum Bereitstellen von Daten in der Elternkomponente und in der Kindkomponente durchinjectdie Funktion zum Empfangen von Daten.

Elternkomponente

Beispiel

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = 'Hello from Parent!';
    provide('message', message);
  }
};
</script>

Kindkomponente

Beispiel

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

<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedMessage = inject('message');
    return {
      injectedMessage
    };
  }
};
</script>

In diesem Beispiel übergibt die übergeordnete Komponente mithilfeprovideder Funktion einen Stringmessage, und die untergeordnete Komponente empfängt mithilfeinjectder Funktion diese Nachricht und zeigt sie an.

Fortgeschrittene Nutzung der provide-Funktion

provideDie Funktion kann nicht nur einfache Daten, sondern auch Methoden, Objekte und sogar reaktive Daten übergeben. Das macht sie in komplexen Anwendungsszenarien sehr nützlich.

Reaktive Daten übergeben

In Vue3 können wirrefoderreactiveverwenden, um reaktive Daten zu erstellen und sie weiterzugebenprovidedie Funktion an die Kindkomponente.

Beispiel

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      count: 0
    });

    provide('state', state);

    return {
      state
    };
  }
};
</script>

In der Kindkomponente können wir mithilfeinjectder Funktion dieses reaktive Objekt erhalten und damit arbeiten.

Beispiel

<template>
  <div>
    <p>Zähler: {{ state.count }}</p>
    <button @click="state.count++">Erhöhen</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const state = inject('state');
    return {
      state
    };
  }
};
</script>

Hinweise zur provide-Funktion

Bei Verwendungprovidebei der Funktion müssen Sie die folgenden Punkte beachten:

1. Namenskonflikte

Bei Verwendungprovideundinject, wenn mehrere Elternkomponenten Daten mit demselben Namen bereitstellen, erhält die Kindkomponente die Daten, die von der nächstgelegenen Elternkomponente bereitgestellt werden. Um Namenskonflikte zu vermeiden, wird daher empfohlen, eindeutige Namen zu verwenden.

2. Umgang mit reaktiven Daten

Wenn Sie möchten, dass die Kindkomponente Daten nur liest, ohne sie zu ändern, können Siereadonlydie Funktion zum Umschließen reaktiver Daten verwenden.

Beispiel

import { provide, reactive, readonly } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    provide('state', readonly(state));
  }
};

Vue3 选项式 APIVue3 Options API

Andere Erweiterungen