Función expose() de Vue3

Vue3 选项式 APIAPI de opciones de Vue3

En Vue3,expose()la función es una herramienta utilizada en la API de Composition para exponer métodos y propiedades internos del componente.

expose()Normalmente se combina consetup()la función, lo que permite a los desarrolladores especificar explícitamente qué propiedades y métodos internos del componente pueden ser accedidos desde el exterior.

¿Por qué se necesita la función expose()?

En Vue2, las propiedades y métodos del componente son públicos por defecto y se puede acceder a ellos directamente desde el exterior. Sin embargo, este diseño puede causar algunos problemas, como:

  1. Problemas de seguridad: los métodos internos pueden quedar expuestos accidentalmente, lo que podría provocar operaciones inseguras.
  2. Problemas de mantenimiento: es difícil rastrear qué propiedades y métodos se utilizan externamente, lo que aumenta la complejidad del mantenimiento.

Vue3 introduceexpose()la función, que permite a los desarrolladores controlar con mayor precisión la interfaz pública del componente, resolviendo así los problemas mencionados.

¿Cómo usar la función expose()?

Sintaxis básica

Ejemplo

export default {
  setup(props, context) {
    const internalMethod = () => {
      console.log('This is an internal method');
    };

    const publicMethod = () => {
      console.log('This is a public method');
    };

    // Exponer el método publicMethod
    context.expose({
      publicMethod
    });

    return {
      internalMethod
    };
  }
};

Explicación

En el código anterior, definimos dos métodos:internalMethodypublicMethod. Mediantecontext.expose(), solo exponemospublicMethod, mientras queinternalMethodno será accesible desde el exterior.

Escenarios de ejemplo

1. Comunicación entre componentes padre e hijo

Supongamos que tenemos un componente padre y un componente hijo; el padre necesita llamar a un método del componente hijo.

Componente hijo

Ejemplo

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

    context.expose({
      childMethod
    });

    return {};
  }
};

Componente padre

Ejemplo

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. Encapsular una biblioteca de componentes

Al desarrollar una biblioteca de componentes, es posible que deseemos exponer solo una parte de los métodos y propiedades para mantener la encapsulación y seguridad del componente.

Ejemplo

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

Precauciones

  1. Llamadas múltiples a expose(): si se llama varias vecesexpose(), solo se expondrá el contenido de la última llamada.
  2. Uso combinado con ref: en el componente padre, se puederefhacer referencia al componente hijo y llamar a sus métodos expuestos.
  3. Compatibilidad：expose()es una característica nueva de Vue3; asegúrate de que tu proyecto use Vue3 o una versión superior.

Vue3 选项式 APIAPI de opciones de Vue3

Otras extensiones