<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
This Pen doesn't use any external CSS resources.