Passing to child component an event handlers within slot in vue 3

I created a couple of reusable components with a slot within it. So I can manage the content, style, or whatever it is anytime I call it, in other components. I wonder, can I passing an event handler to those components but inside the template tag?


<a :href="hrefProps"> // I want the handler goes here
  <slot></slot> // it will render plain text, without html tags

Main Component

  <template @click="sayHelloWorld">Hello World!</template> // didn't work

How can I make that to work? Should I wrap them into at least 1 tag, like

<template><a @click="sayHelloWorld"></a></template> // sure it will working


Template tags don’t create a DOM element, so pi can’t add a listener to them, or add a class or anything else.

They are just a semantic tool to wrap multiple children in a loop.

Add the listener to the real parent element i-e href tag