Fonction provide de Vue3

Vue3 选项式 APIVue3 API des options

provideLa fonction est une fonction d'ordre supérieur fournie par Vue3, utilisée pour transmettre des données des composants parents aux composants enfants dans l'arbre de composants. Par rapport au traditionnelpropscomparé,provideetinjectelle offre une manière plus flexible de partager des données, en particulier lorsque la hiérarchie des composants est profonde.

Utilisationprovidela fonction, le composant parent peut exposer certaines données ou méthodes au composant enfant à travers elle, et le composant enfant peut à traversinjectla fonction pour recevoir ces données ou méthodes.

Utilisation de base de la fonction provide

Voici un exemple simple qui montre comment utiliserprovidela fonction pour fournir des données dans le composant parent, et dans le composant enfant viainjectla fonction pour recevoir des données.

Composant parent

Exemple

<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>

Composant enfant

Exemple

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

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

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

Dans cet exemple, le composant parent, viaprovidela fonction, transmet une chaînemessage, et le composant enfant, viainjectla fonction, reçoit et affiche ce message.

Utilisation avancée de la fonction provide

provideLa fonction peut non seulement transmettre des données simples, mais aussi des méthodes, des objets et même des données réactives. Cela la rend très utile dans des scénarios d'application complexes.

Transmission de données réactives

Dans Vue3, on peut utiliserrefoureactivepour créer des données réactives, et les transmettre viaprovidela fonction au composant enfant.

Exemple

<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>

Dans le composant enfant, nous pouvons, viainjectla fonction pour obtenir cet objet réactif et le manipuler.

Exemple

<template>
  <div>
    <p>Compteur : {{ state.count }}</p>
    <button @click="state.count++">Incrémenter</button>
  </div>
</template>

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

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

Remarques sur la fonction provide

Lors de l'utilisationprovidela fonction, vous devez noter les points suivants :

1. Conflits de nommage

Lors de l'utilisationprovideetinject, si plusieurs composants parents fournissent des données portant le même nom, le composant enfant recevra les données fournies par le composant parent le plus proche. Par conséquent, pour éviter les conflits de nommage, il est recommandé d'utiliser des noms uniques.

2. Gestion des données réactives

Lors de la transmission de données réactives, le composant enfant peut modifier directement ces données. Si vous souhaitez que le composant enfant lise uniquement les données sans les modifier, vous pouvez utiliserreadonlyla fonction pour envelopper les données réactives.

Exemple

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

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

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

Vue3 选项式 APIVue3 API des options

Autres extensions