From harness-claude
Implements Vue child-to-parent communication using defineEmits and emit for events. Useful for notifying parents of user actions, state changes, or form inputs in reusable components.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Communicate from child to parent components using emits and defineEmits
Provides patterns for Vue components including props validation with TypeScript, defaults, emits, slots, and provide/inject. Use when building reusable Vue components.
Enforces Vue 3 best practices with Composition API, <script setup>, and TypeScript. Covers reactivity gotchas, computed properties, performance optimizations, SSR, Volar, vue-tsc for .vue files, Vue Router, Pinia, Vite projects.
Applies Vue slots pattern with named, scoped, and dynamic slots to build flexible composable components like Cards, Modals, tables, and lists.
Share bugs, ideas, or general feedback.
Communicate from child to parent components using emits and defineEmits
defineEmits<{ eventName: [payload: Type] }>() in <script setup>.emit('eventName', payload).@event-name="handler" (kebab-case in template).<!-- ChildButton.vue -->
<script setup lang="ts">
const emit = defineEmits<{
click: [id: number];
update: [value: string];
}>();
</script>
<template>
<button @click="emit('click', 42)">Click</button>
</template>
<!-- Parent.vue -->
<ChildButton @click="handleClick" @update="handleUpdate" />
v-model as syntactic sugar for an update:modelValue event pattern.defineEmits.Vue's event system follows a "props down, events up" pattern. Parents pass data to children via props; children notify parents via emitted events. This creates a clear, unidirectional data flow that is easy to trace and debug.
Trade-offs:
provide/inject or a storedefineEmits)When NOT to use:
provide/inject or Piniahttps://patterns.dev/vue/component-events