¿Qué es defineExpose()?

defineExpose() es una función que se usa dentro del setup() de un componente para especificar qué propiedades y métodos deben estar accesibles desde el componente padre. Esto es especialmente útil en casos donde un componente hijo necesita exponer algunos de sus métodos o datos para que el componente padre pueda interactuar con ellos.

Ejemplo de Uso

Componente Hijo (ChildComponent.vue)

<script setup>
import { ref, defineExpose } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}

// Expose the increment method and count property to the parent component
defineExpose({
  increment,
});
</script>

<template>
  <div>
    <button @click="increment">Increase Count</button>
  </div>
</template>

Se usa defineExpose({ increment }) para exponer el método increment() al componente padre. Esto permite que el componente padre llame a increment() desde su propio contexto.`

Componente Padre

<!-- ParentComponent.vue -->

<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";

const child = ref(null);

function callIncrement() {
  // Call the increment method from the child component
  child.value.increment();
}
</script>

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callIncrement">Call Increment from Parent</button>
</template>

Se hace referencia al componente hijo utilizando ref. Luego, se puede llamar al método increment() del componente hijo a través de child.value.increment().

Beneficios de usar defineExpose()

• Encapsulamiento: Mantiene el encapsulamiento del componente al permitir que el componente hijo exponga solo lo necesario.
• Flexibilidad: Facilita la comunicación entre componentes, especialmente cuando necesitas que un componente padre interactúe con métodos específicos de un componente hijo.
• Mantenimiento del Código: Ofrece una forma más clara y estructurada de exponer propiedades y métodos, mejorando la mantenibilidad del código.