diff --git a/packages/devtools-kit/src/core/plugin/components.ts b/packages/devtools-kit/src/core/plugin/components.ts
index 02d929bf..91333da9 100644
--- a/packages/devtools-kit/src/core/plugin/components.ts
+++ b/packages/devtools-kit/src/core/plugin/components.ts
@@ -3,7 +3,7 @@ import { debounce } from 'perfect-debounce'
 import { getInstanceState } from '../../core/component/state'
 import { editState } from '../../core/component/state/editor'
 import { ComponentWalker } from '../../core/component/tree/walker'
-import { getAppRecord, getComponentId, getComponentInstance } from '../../core/component/utils'
+import { getAppRecord, getComponentId, getComponentInstance, getInstanceName } from '../../core/component/utils'
 import { activeAppRecord, devtoolsContext, devtoolsState, DevToolsV6PluginAPIHookKeys } from '../../ctx'
 import { hook } from '../../hook'
 import { exposeInstanceToWindow } from '../vm'
@@ -82,6 +82,15 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
       api.sendInspectorState(INSPECTOR_ID)
     }, 120)
 
+    hook.on.componentEmit(async (app, instance, event, params) => {
+      const appRecord = await getAppRecord(app)
+
+      if (!appRecord)
+        return
+      const componentName = getInstanceName(instance)
+      console.log('component-emit', componentName, event, params)
+    })
+
     const componentAddedCleanup = hook.on.componentAdded(async (app, uid, parentUid, component) => {
       if (devtoolsState.highPerfModeEnabled)
         return
diff --git a/packages/devtools-kit/src/hook/index.ts b/packages/devtools-kit/src/hook/index.ts
index 5a77521c..ccf08131 100644
--- a/packages/devtools-kit/src/hook/index.ts
+++ b/packages/devtools-kit/src/hook/index.ts
@@ -21,6 +21,9 @@ const on: VueHooks['on'] = {
   componentAdded(fn) {
     return devtoolsHooks.hook(DevToolsHooks.COMPONENT_ADDED, fn)
   },
+  componentEmit(fn) {
+    return devtoolsHooks.hook(DevToolsHooks.COMPONENT_EMIT, fn)
+  },
   componentUpdated(fn) {
     return devtoolsHooks.hook(DevToolsHooks.COMPONENT_UPDATED, fn)
   },
@@ -113,6 +116,12 @@ export function subscribeDevToolsHook() {
     devtoolsHooks.callHook(DevToolsHooks.COMPONENT_REMOVED, app, uid, parentUid, component)
   })
 
+  hook.on<DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]>(DevToolsHooks.COMPONENT_EMIT, async (app, instance, event, params) => {
+    if (!app || !instance || devtoolsState.highPerfModeEnabled)
+      return
+    devtoolsHooks.callHook(DevToolsHooks.COMPONENT_EMIT, app, instance, event, params)
+  })
+
   // devtools plugin setup
   hook.on<DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]>(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => {
     if (options?.target === 'legacy')
diff --git a/packages/devtools-kit/src/types/hook.ts b/packages/devtools-kit/src/types/hook.ts
index b0371d1b..07ff4062 100644
--- a/packages/devtools-kit/src/types/hook.ts
+++ b/packages/devtools-kit/src/types/hook.ts
@@ -26,6 +26,7 @@ export interface DevToolsEvent {
   [DevToolsHooks.APP_CONNECTED]: () => void
   [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>
   [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>
+  [DevToolsHooks.COMPONENT_EMIT]: (app: HookAppInstance, instance: VueAppInstance, event: string, params: unknown) => void | Promise<void>
   [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added']
   [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added']
   [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: { target?: string }) => void
@@ -51,6 +52,7 @@ export interface VueHooks {
     vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void
     vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void
     componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void
+    componentEmit: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]) => () => void
     componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void
     componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void
     setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void
diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
index d3242f5f..72314278 100644
--- a/packages/playground/basic/src/pages/Home.vue
+++ b/packages/playground/basic/src/pages/Home.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Foo from '../components/Foo.vue'
 
+const emit = defineEmits(['update'])
 const visible = ref(false)
-
 const obj = reactive<{
   count: number
   foo?: number
@@ -16,12 +16,19 @@ obj.foo = toRef(obj, 'count')
 // @ts-expect-error type guard
 obj.bar = ref('bar')
 
+function trigger() {
+  emit('update', 1)
+}
+
 const toRefObj = toRefs(obj)
 </script>
 
 <template>
   <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
     Home
+    <button @click="trigger">
+      Click me
+    </button>
     <Foo v-if="visible" />
     <img src="/vite.svg" alt="Vite Logo">
     <button class="w-30 cursor-pointer" @click="visible = !visible">