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="highlight = !highlight" :class="{ highlight }"></my-child>
</div>

CSS

.highlight {
  background: yellow;
}

JavaScript

const MyChild = {
  inheritAttrs: false,
  
  template: `
    <div v-bind="attrs.attributes">
      <div>Some text without events</div>
      <button v-bind="attrs.listeners">Click me</button>
    </div>
  `,
  
  computed: {
    attrs () {
      const onRE = /^on[^a-z]/
      const attributes = {}
      const listeners = {}
      const { $attrs } = this
      
      for (const property in $attrs) {
        if (onRE.test(property)) {
          listeners[property] = $attrs[property]
        } else {
          attributes[property] = $attrs[property]
        }
      }

      return { attributes, listeners }
    }
  }
}

Vue.createApp({
  components: {
    MyChild
  },
  
  data () {
    return {
      highlight: false
    }
  }
}).mount('#app')