Hur kommunicerar en underordnad komponent tillbaka till sin överordnad?

<!-- TodoItem.vue -->
<script setup>
const props = defineProps({ todo: Object });
const emit = defineEmits(["delete", "toggle"]); // declare the events you emit

function onDelete() {
  emit("delete", props.todo.id); // emit an event WITH a payload
}
</script>

<template>
  <li>
    {{ todo.text }}
    <button @click="onDelete">Delete</button>
    <button @click="emit('toggle', todo.id)">Toggle</button>
  </li>
</template>