Vue3如何封装组件实现相同事件处理器复用且不破坏原有样式？

这个需求在Vue 3中完全可以实现，不需要额外引入依赖，也不会破坏原有样式。

实现方案：自定义无渲染透传组件 #

Vue 3支持无根节点组件，配合自动属性透传机制，可以实现你要的无额外DOM、自动给所有子元素绑定事件的效果。

1. 首先创建一个极简的自定义组件（比如命名为WrapperFragment.vue）：

<script setup>
// 无需编写任何逻辑，Vue会自动处理属性和事件透传
</script>

<template>
  <slot />
</template>

这个组件不会生成任何额外的DOM节点，所有绑定在它身上的属性、事件都会自动透传给插槽内的每一个直接子元素。
2. 按照你预期的写法使用即可：

<WrapperFragment @click="redirectToHome">
  <q-avatar rounded color="green">
    <img ... />
  </q-avatar>
  <q-toolbar-title>
   App
  </q-toolbar-title>
</WrapperFragment>

补充说明 #

Vue原生的<> </>隐式Fragment语法糖不支持绑定属性和事件，所以不能直接用来绑定click事件，才需要用上面的自定义组件实现。

内容的提问来源于stack exchange，提问作者entropyfeverone