JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="content = !content">
    Toggle
  </button>
  <my-child>
    <template v-if="content" v-slot:item_abc="ctx">
      Name: {{ ctx.item.name }}
    </template>
  </my-child>
</div>

JavaScript

const DeepChild = {
  template: `
    <div>
      <slot name="item_abc" :subItem="{ val: 17, name: 'Ha' }" />
    </div>
  `
}

const MyChild = {
  template: `
    <div>
      <deep-child>
        <template v-slot:[slot_name_provider()]="{ subItem }">
          <slot :name="slot_name_provider()" :item="subItem">Val: {{ subItem.val }}</slot>
        </template>
      </deep-child>
    </div>
  `,
  
  components: {
    DeepChild
  },
  
  methods: {
    slot_name_provider () {
      return 'item_abc'
    }
  }
}

new Vue({
  el: '#app',
  
  components: {
    MyChild
  },
  
  data () {
    return {
      content: true
    }
  }
})