Passing Named Slot to Child Component

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

` ` makes it impossible. When `forchild` slot populated `title` slot will be overridden. If you place them side by side it is possible to achieve what you want. — Eldar, Oct 02 '20 at 20:21

score 0 · Answer 1 · answered Dec 02 '20 at 03:41

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.

Passing Named Slot to Child Component

1 Answers1