JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

  <parent :tab-list="tabList">

    <div slot="tab1">
      This is the content for tab 1
    </div>

    <div slot="tab2">
      This is the content for tab 2
    </div>

    <div slot="tab3">
      This is the content for tab 3
    </div>
  </parent>

</div>

JavaScript

var child = Vue.component('child', {
  template: `<div class="container">
              <div class="panel-heading">
                This is panel heading
              </div>
              <div class="panel-body">
                <slot></slot>
              </div>
              <div class="button-panel">
                This is the buttons panel: {{ tabData }}
              </div>
            </div>`,
  props: ['name', 'id', 'tabData'],
  name: 'child'
});





var parent = Vue.component('parent', {
  template: ` <div>
            <div v-for="tab in tabList">
              <child
               :id="tab.id"
               :tab-data="tabData"
              ><slot :name="tab.name"></slot>
              </child>
            </div>
          </div>`,
  name: 'parent',
  data: function() {
    return {
      tabData: {
        'k1': 'value1',
        'k2': 'value2'
      }
    }
  },
  props: ['tabList'],
  created(){
  	console.log(this.$slots)
    console.log(this.$namedSlots)
  },
  components: {
    child
  },
});


var vm = new Vue({
  el: '#app',
  data: {
    tabList: [{
      name: 'tab1',
      id: 1
    }, {
      name: 'tab2',
      id: 2
    }, {
      name: 'tab3',
      id: 3
    }]
  },
  components: {
    parent
  }
})