Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

529
Visualizações
Vue Composition API: Defining emits

When defining custom events Vue encourages us to define emitted events on the component via the emits option:

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

Using Vue 3's composition API, when a standalone composition function emits custom events, is it possible to define these in the composition function?

over 4 years ago · Santiago Trujillo
4 Respostas
Responde à pergunta

0

No, because composition functions are used inside the setup hook which doesn't have access to the other options like methods and 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() {
        // ...
    },
});

In the example, useBreakpoint offers only some logic that the component could use. If there was a way to define the emits option in the composition function, then the function would always emit the event, even if the function is only used inside the component that defines the handler of the emitted event.

over 4 years ago · Santiago Trujillo Relatório

0

I did it like this with the script setup syntax:

<script setup>
    import { defineEmits } from 'vue'
    
    const emit = defineEmits(['close'])
    
    const handleClose = () => {
        emit('close')
    }
</script>
over 4 years ago · Santiago Trujillo Relatório

0

if you want to get all the context

setup(props, context) {
   // console.log(context)
   context.emit("update:modelValue", data)
},
over 4 years ago · Santiago Trujillo Relatório

0

If you are using script setup you can use defineEmits which is a compiler macros and you don't have to import it:

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

emit('inFocus')
</script>

You can also use an object syntax, which allows performing events validation:

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

Note: the submit event will be emitted regardless of validation but if the validation doesn't pass, you will get a Vue warning:

[Vue warn]: Invalid event arguments: event validation failed for event "submit".

See it live


Typing with TS:

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda