<div class="vue-app">
  <parent>
    <template v-slot:child-slot>
This text came outside of the parent component and it's passed through the parent to the child :)
    </template>
  </parent>
</div>

<script type="text/x-template" id="parent">
  <template>
   <child>
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
  <slot :name="name" v-bind="data"></slot>
</template>
  </child>
  </template>
</script>

<script type="text/x-template" id="child">
  <template>
    <div>
      <slot name="child-slot">Fallback Content</slot>
    </div>
 </template>
</script>
const child = {
  name: 'child',
  template: '#child'
}

const parent = {
  name: 'parent',
  template: '#parent',
  components: {
    child
  }
}

new Vue({
  el: '.vue-app',
  components: {
    parent
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js