JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app"></div>

JavaScript

const { createApp, h, reactive } = Vue

const MyComponent = {
  template: `<button @click="$emit('some-event-name')">Click</button>`
}

const eventListeners = reactive({})

const app = createApp({
  render() {
    const propsData = {}
    
    for (const event in eventListeners) {
      propsData['on' + event.charAt(0).toUpperCase() + event.slice(1)] = eventListeners[event]
    }
    
    return h(MyComponent, propsData);
  }
})

app.mount('#app')

// ... add event listener ...

const addComponentEventListener = (event, handler) => {
  eventListeners[event] = eventListeners[event] || []
  eventListeners[event].push(handler)
}

addComponentEventListener('some-event-name', () => {
  console.log('here!!')
})