Блог

Это и есть код:

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

мне нужен фиктивный компонент <></> , в котором я могу обернуть эти два компонента и использовать обработчики событий только один раз. Что-то вроде этого:

 <what-to-put-here @click="redirectToHome">
<q-avatar rounded color="green">
  <img ... />
</q-avatar>
<q-toolbar-title>
 App
</q-toolbar-title>
</what-to-put-here>
 

Возможно ли это в Vue 3 ?

[ПРАВИТЬ]

Очевидно, что использование a <div></div> испортит стили

Вы можете создать компонент-оболочку, который отображает слоты и привязывает к ним обработчики. Что-то вроде этого

 // WrapperComponent
setup(props, { slots }) { 
  return () => {
        if (slots.default)
          return slots.default({ prop: someProp })?.map((node, i) => h(node, { ref: `target-${i}`, ...attrs, onClick: $event => console.log('clicked', $event.target)}));
      };
  }