JSFiddle - React, Tailwind, and code Playground

Uses a Proxy to listen to any emitted event

by Simon Herteby

HTML

<div id="vue">
  <child v-catchall="log" @click="click"></child>
</div>

JavaScript

Vue.directive('catchall',{
	bind(el, binding, vnode){
  console.log({el, binding, vnode})
    const handler = binding.value
    if(typeof handler !== 'function'){
    	throw new Error('handler must be a function')
    }
    if(!vnode.componentInstance){
    	throw new Error('catchall only works on components')
    }
    const oldListeners = vnode.componentInstance._events
    vnode.componentInstance._events = new Proxy(oldListeners, {
      get(target, key){
      	let listeners = [val => {
        	handler(key, val)
        }]
        if(target[key]){
        	listeners = listeners.concat(target[key])
        }
        return listeners
      }
    })
  }
})

new Vue({
  el: '#vue',
  methods:{
  	log(event, value){
    	console.log({event, value})
    },
    click(){
    	console.log('CLICK!')
    }
  },
  components: {
    child: {
      template: `<input @input="emit" @click="$emit('click')">`,
      methods: {
        emit(e) {
          const val = e.target.value
          this.$emit('update:' + val, val)
        }
      }
    }
  }
})