Component Props & Custom Events (defineProps / defineEmits)

Component Props & Emits

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
    title: { type: String, required: true },
    isFree: { type: Boolean, default: true }
})

const emit = defineEmits(['start-lesson'])
</script>

<template>
    <div class="lesson-item">
        <h3>{{ title }}</h3>
        <button @click="emit('start-lesson', title)">Start</button>
    </div>
</template>