[Vuejs]-How to wrap html components in Vue 3 to make use of same event handlers?

by

0👍

You can create a wrapper component which renders the slots and binds handlers on them.
Something like this

// 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)}));
      };
  }

Leave a comment