Fonction expose() de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,expose()la fonction est un outil utilisé pour exposer les méthodes et propriétés internes d'un composant dans la Composition API.

expose()Généralement utilisée avec lasetup()fonction, elle permet aux développeurs de spécifier explicitement quelles propriétés et méthodes internes d'un composant peuvent être accessibles de l'extérieur.

Pourquoi avons-nous besoin de la fonction expose() ?

Dans Vue2, les propriétés et méthodes d'un composant sont publiques par défaut et il est possible d'y accéder directement depuis l'extérieur. Cependant, cette conception peut entraîner certains problèmes, tels que :

  1. Problèmes de sécurité: des méthodes internes peuvent être exposées accidentellement, ce qui peut entraîner des opérations non sécurisées.
  2. Problèmes de maintenance: il est difficile de suivre quelles propriétés et méthodes sont utilisées en externe, ce qui augmente la complexité de la maintenance.

Vue3 introduit laexpose()fonction, permettant aux développeurs de contrôler plus précisément l'interface publique des composants, résolvant ainsi les problèmes ci-dessus.

Comment utiliser la fonction expose() ?

Syntaxe de base

Exemple

export default {
  setup(props, context) {
    const internalMethod = () => {
      console.log('Ceci est une méthode interne');
    };

    const publicMethod = () => {
      console.log('Ceci est une méthode publique');
    };

    // Exposer la méthode publicMethod
    context.expose({
      publicMethod
    });

    return {
      internalMethod
    };
  }
};

Explication

Dans le code ci-dessus, nous avons défini deux méthodes :internalMethodetpublicMethod. Grâce àcontext.expose(), nous n'avons exposé quepublicMethod, tandis queinternalMethodne sera pas accessible de l'extérieur.

Exemples de scénarios

1. Communication entre composants parent et enfant

Supposons que nous ayons un composant parent et un composant enfant, et que le composant parent doive appeler une méthode du composant enfant.

Composant enfant

Exemple

export default {
  setup(props, context) {
    const childMethod = () => {
      console.log('Méthode enfant appelée');
    };

    context.expose({
      childMethod
    });

    return {};
  }
};

Composant parent

Exemple

import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    onMounted(() => {
      if (childRef.value) {
        childRef.value.childMethod();
      }
    });

    return {
      childRef
    };
  }
};

2. Encapsulation d'une bibliothèque de composants

Lors du développement d'une bibliothèque de composants, nous pouvons vouloir exposer uniquement certaines méthodes et propriétés afin de maintenir l'encapsulation et la sécurité des composants.

Exemple

export default {
  setup(props, context) {
    const internalState = ref('état interne');
    const publicState = ref('état public');

    const publicMethod = () => {
      console.log('Méthode publique appelée');
    };

    context.expose({
      publicState,
      publicMethod
    });

    return {
      internalState
    };
  }
};

Notes

  1. Appel de expose() plusieurs fois: Si appelé plusieurs foisexpose(), seul le contenu du dernier appel sera exposé.
  2. Utilisation en conjonction avec ref: Dans le composant parent, vous pouvez utiliserrefpour référencer le composant enfant et appeler ses méthodes exposées.
  3. Compatibilité：expose()est une nouvelle fonctionnalité de Vue3. Assurez-vous que votre projet utilise Vue3 ou supérieur.

Vue3 选项式 APIVue3 API des options

Autres extensions