Vue — Events

Emitting events

<!-- Child component -->
<template>
  <button @click="$emit('click')">Click me</button>
</template>

<script>
export default {
  emits: ['click']
}
</script>

Parent listener

<template>
  <ChildButton @click="handleClick" />
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

Passing data with events

<!-- Child -->
<template>
  <button @click="$emit('select', item)">Select</button>
</template>

<script>
export default {
  props: ['item'],
  emits: ['select']
}
</script>

<!-- Parent -->
<template>
  <ChildButton @select="handleSelect" />
</template>

<script>
export default {
  methods: {
    handleSelect(item) {
      console.log('Selected:', item)
    }
  }
}
</script>

Event modifiers

<!-- .native modifier for component events -->
<ChildButton @click.native="handleClick" />

Custom events with emit

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

Multiple events

<template>
  <button @click="$emit('click'); $emit('track', 'button-click')">Click</button>
</template>

Mini Practice

1. Emit a simple event
2. Pass data with events
3. Use custom v-model
4. Handle multiple emitted events

Up Next

Continue with Slots - Content distribution.