JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-child @click="onClick" v-on="{ click: onClick2 }"></my-child>
</div>

JavaScript

Vue.createApp({
  components: {
    MyChild: {
      template: `
        <button @click="handler">Click</button>
      `,

      props: ['onClick'],

      methods: {
        handler () {
          console.log('onClick:', this.onClick)
          
          if (this.onClick) {
            // Intensive calculation here
            this.$emit('click')
          }
        }
      }
    }  
  },
  
  methods: {
    onClick () {
      console.log('handler 1')
    },
    
    onClick2 () {
      console.log('handler 2')
    }

  }
}).mount('#app')