JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <my-child>
    <template v-slot:header>
      <h2>
        Header
      </h2>
    </template>
    <template v-slot:footer="{ year }">
      <div>
        Copyright {{ year }}
      </div>
    </template>
  </my-child>
</div>

JavaScript

const InnerComponent = {
  template: `
    <div>
      <slot name="header" />
      <hr>
      <slot name="footer" :year="2021" />
    </div>
  `
}

const MyChild = {
  template: `
    <div>
      <inner-component>
        <template v-for="(_, name) in $scopedSlots" v-slot:[name]="slotProps">
          <slot :name="name" v-bind="slotProps" />
        </template>
      </inner-component>
    </div>
  `,
  
  components: {
    InnerComponent
  }
}

new Vue({
  el: '#app',
  components: {
    MyChild
  }
})