Emitting Events

Declare and emit

Children notify parents; parents decide how to update state.

<!-- FancyButton.vue -->
<script setup>
const emit = defineEmits(["save"]);
</script>

<template>
  <button type="button" @click="emit('save')">Save</button>
</template>

Listen in the parent

Use v-on with the event name.

<FancyButton @save="onSave" />

function onSave() {
  console.log("saved");
}

Pass a payload

Emit arguments for ids or form values.

emit("remove", id);

// parent:
// <Row @remove="removeItem" />

Lift state to the parent

Keep shared lists and forms in the parent; children stay focused on display and local interaction.