Al definir eventos personalizados, Vue nos anima a definir eventos emitidos en el componente a través de la opción emits :
app.component('custom-form', { emits: ['inFocus', 'submit'] })Usando la API de composición de Vue 3, cuando una función de composición independiente emite eventos personalizados, ¿es posible definirlos en la función de composición?
No, porque las funciones de composición se utilizan dentro del gancho de setup que no tiene acceso a otras opciones como methods y emits :
export default defineComponent({ name: "layout", emits: ['showsidebar'], setup(props, { emit }) { const showSidebar = ref(true); const { breakpoints } = useBreakpoint(); watch(breakpoints, (val) => { showSidebar.value = !(val.is === "xs" || val.is === "sm"); emit('showsidebar',showSidebar.value); }); return { showSidebar, }; }, data() { // ... }, }); En el ejemplo, useBreakpoint ofrece solo alguna lógica que el componente podría usar. Si hubiera una forma de definir la opción emits en la función de composición, entonces la función siempre emitiría el evento, incluso si la función solo se usa dentro del componente que define el controlador del evento emitido.
Lo hice así con la sintaxis de configuración del script:
<script setup> import { defineEmits } from 'vue' const emit = defineEmits(['close']) const handleClose = () => { emit('close') } </script>si quieres obtener todo el context
setup(props, context) { // console.log(context) context.emit("update:modelValue", data) },Si está utilizando la configuración de script setup , puede usar defineEmits que es un compilador de macros y no tiene que importarlo:
<script setup> const emit = defineEmits(['inFocus', 'submit']) emit('inFocus') </script>También puede usar una sintaxis de objetos, que permite realizar la validación de eventos:
<script setup> const emit = defineEmits({ // No validation inFocus: null, // Validate submit event submit: ({ email, password }) => { if (email && password) return true else return false } }) function submitForm(email, password) { emit('submit', { email, password }) } </script> Nota: el evento de submit se emitirá independientemente de la validación, pero si la validación no pasa, recibirá una advertencia de Vue:
[Advertencia de Vue]: argumentos de evento no válidos: la validación del evento falló para el evento "enviar".
Escribir con TS:
<script setup lang="ts"> const emit = defineEmits<{ (e: 'change', id: number): void (e: 'update', value: string): void }>() </script>