Passing Named Slot to Child Component - vue.js

Question

Due to some server side rendering, I'd like to be able to pass a named slot from a parent component into a child component, but I'm not sure the correct mechanism. I'm able to get the top level template to pass through, but the child named slot of title doesn't seem to be accessible.
<div id="app1">
<parent>
<template #forchild>
<div>
For child template area
<template #title>Title!</template>
</div>
</template>
</parent>
</div>
const Child = {
template: `
<div class="child">
Child area
<slot name="forchild">
<slot name="title"></slot>
</slot>
</div>
`,
};
const Parent = {
template: `
<div class="parent">
Parent Area
<child>
<template #forchild>
<slot name="forchild"></slot>
</template>
</child>
</div>
`,
components: {
Child,
},
};
new Vue({
el: '#app1',
components: {
Parent,
}
});
jsfiddle

Answer 1

I am not entirely sure what you are trying to accomplish here. But it is possible to pass slots to grandchildren. And if you want to pass two slots, that's also possible, but you have to pass them separately, not nested. And they also can't be nested inside the grandchild template.
But why not use a single slot?
<div id="app1">
<parent>
<template #forchild>
<div>
For child template area
</div>
<h1>
Title!
</h1>
</template>
</parent>
</div>
const Child = {
template: `
<div class="child">
Child area
<slot name="forchild"></slot>
</div>
`,
};
const Parent = {
template: `
<div class="parent">
Parent Area
<child>
<template #forchild>
<slot name="forchild"></slot>
</template>
</child>
</div>
`,
components: {
Child,
},
};
new Vue({
el: '#app1',
components: {
Parent,
}
});
For more advanced nesting of slots, check out this answer.