Vue3 expose()-Funktion

Vue3 选项式 APIVue3 Options API

In Vue3,expose()Die Funktion ist ein Werkzeug, um die internen Methoden und Eigenschaften einer Komponente in der Composition API verfügbar zu machen.

expose()Sie wird üblicherweise zusammen mit dersetup()Funktion verwendet und ermöglicht Entwicklern, explizit anzugeben, auf welche internen Eigenschaften und Methoden einer Komponente von außen zugegriffen werden kann.

Warum brauchen wir die expose()-Funktion?

In Vue2 sind die Eigenschaften und Methoden einer Komponente standardmäßig öffentlich und von außen direkt zugänglich. Allerdings kann dieses Design zu einigen Problemen führen, wie z. B.:

  1. Sicherheitsprobleme: Interne Methoden können versehentlich offengelegt werden, was zu unsicheren Operationen führt.
  2. Wartungsprobleme: Es ist schwierig nachzuvollziehen, welche Eigenschaften und Methoden extern verwendet werden, was die Komplexität der Wartung erhöht.

Vue3 führt dieexpose()Funktion ein, mit der Entwickler die öffentliche Schnittstelle von Komponenten präziser steuern können, wodurch die oben genannten Probleme gelöst werden.

Wie verwendet man die expose()-Funktion?

Grundlegende Syntax

Beispiel

export default {
  setup(props, context) {
    const internalMethod = () => {
      console.log('Dies ist eine interne Methode');
    };

    const publicMethod = () => {
      console.log('Dies ist eine öffentliche Methode');
    };

    // Die Methode publicMethod verfügbar machen
    context.expose({
      publicMethod
    });

    return {
      internalMethod
    };
  }
};

Erklärung

Im obigen Code haben wir zwei Methoden definiert:internalMethodundpublicMethod. Durchcontext.expose(), haben wir nur verfügbar gemachtpublicMethod, währendinternalMethodwird von außen nicht zugänglich sein.

Beispielszenarien

1. Kommunikation zwischen Eltern- und Kindkomponenten

Angenommen, wir haben eine Elternkomponente und eine Kindkomponente, und die Elternkomponente muss eine Methode der Kindkomponente aufrufen.

Untergeordnete Komponente

Beispiel

export default {
  setup(props, context) {
    const childMethod = () => {
      console.log('Child method called');
    };

    context.expose({
      childMethod
    });

    return {};
  }
};

Übergeordnete Komponente

Beispiel

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. Kapselung einer Komponentenbibliothek

Bei der Entwicklung einer Komponentenbibliothek möchten wir möglicherweise nur einige Methoden und Eigenschaften verfügbar machen, um die Kapselung und Sicherheit der Komponenten zu wahren.

Beispiel

export default {
  setup(props, context) {
    const internalState = ref('internal state');
    const publicState = ref('public state');

    const publicMethod = () => {
      console.log('Public method called');
    };

    context.expose({
      publicState,
      publicMethod
    });

    return {
      internalState
    };
  }
};

Hinweise

  1. Mehrmaliges Aufrufen von expose(): Wenn sie mehrmals aufgerufen wirdexpose(), wird nur der Inhalt des letzten Aufrufs exponiert.
  2. Verwendung in Verbindung mit ref: In der Elternkomponente können Sierefdie untergeordnete Komponente referenzieren und ihre exponierten Methoden aufrufen.
  3. Kompatibilität：expose()ist eine neue Funktion von Vue3. Stellen Sie sicher, dass Ihr Projekt Vue3 oder höher verwendet.

Vue3 选项式 APIVue3 Options API

Andere Erweiterungen