vue.js - 将命名槽传递给子组件

Question

由于某些服务器端渲染，我希望能够将命名插槽从父组件传递到子组件，但我不确定正确的机制。我能够让顶级模板通过，但名为 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,
  }
});

jsfiddle

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

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