将命名槽传递给子组件

Question

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

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

提琴手

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

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