JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

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

JavaScript

const Parent = {
  render () {
    const children = this.$slots.default()
    
    return Vue.h('div', children.map((child, index) => {
      return Vue.h({
        provide: {
          index: index + 1
        },
        
        render () {
          return child
        }
      })
    }))
  }
}

const Child = {
  inject: ['index'],
  template: '<div>I am {{ index }}</div>'
}

Vue.createApp({
  components: {
    Parent,
    Child
  }
}).mount('#app')