将命名槽传递给子组件答案

【问题标题】：Passing Named Slot to Child Component将命名槽传递给子组件
【发布时间】：2021-01-18 09:41:30
【问题描述】：

由于某些服务器端渲染，我希望能够将命名插槽从父组件传递到子组件，但我不确定正确的机制。我能够让顶级模板通过，但 title 的名为 slot 的子项似乎无法访问。

<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

【问题讨论】：

<slot name="forchild"> <slot name="title"></slot> </slot> 使它成为不可能。当forchild 插槽填充title 插槽将被覆盖。如果你把它们并排放置，就有可能实现你想要的。

标签： vue.js

【解决方案1】：

我不完全确定您要在这里完成什么。但是可以将插槽传递给孙子。如果你想传递两个插槽，这也是可能的，但你必须分别传递它们，而不是嵌套传递。而且它们也不能嵌套在孙模板中。

但为什么不使用单个插槽呢？

<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,
  }
});

有关更高级的插槽嵌套，请查看此answer。

【讨论】：