将命名槽传递给子组件

Posted 2023-02-22

【中文标题】将命名槽传递给子组件

【英文标题】：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 插槽将被覆盖。如果你把它们并排放置，就有可能实现你想要的。

【参考方案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。