如何继承带有svelte组件的slots？

Question

有一个组件<Bar>继承自一个组件<Foo>。

该<Foo>组件定义了一个以后备内容命名的槽content。该组件还定义了一个以不同后备内容<Bar>命名的槽。content

<!-- Foo.svelte -->
<slot name="content">
  foo fallback
</slot> 

<!-- Bar.svelte -->
<script>import Foo from './Foo.svelte'</script>
<Foo>
    <span slot="content">
        bar fallback
    </span>
</Foo>

该<Bar>组件在使用 调用时显示后备<Foo/>，但在使用 调用时不显示自定义内容<Bar><span slot="content">bar custom</span></Bar>。

你能告诉我我做错了什么吗？

<Foo/>
<!-- prints 'foo fallback': OK -->

<Foo>
    <span slot="content">foo custom</span>
</Foo>
<!-- prints 'foo custom': OK -->

<Bar/>
<!-- prints 'bar fallback': OK -->

<Bar>
    <span slot="content">bar custom</span>
</Bar>
<!-- prints 'bar fallback': KO - I would have expected 'bar custom' -->

请注意，此代码过于简单，而我的实际用例比这更复杂，我需要在那里使用插槽。

小提琴：https://svelte.dev/repl/5c525651eb8b4f60a6a696c1bd19f723

Answer 1

看起来您想要渲染传递到Bar定义的槽中的槽内容Foo，但目前您还没有在 中定义槽Bar，因此没有地方可以使用传递的内容，因此回退值始终传递到Foo。

解决方案可能如下所示，在传递给 的内容槽的范围内content定义一个槽。Bar Foo

// App.svelte

<script>
    import Foo from './Foo.svelte'
    import Bar from './Bar.svelte'
</script>

Expected: <em>bar custom</em><br>
<Bar>
    <span slot="content">bar custom</span>
</Bar>

// ./Bar.svelte

<script>
  import Foo from './Foo.svelte';
</script>

<Foo>
  <span slot="content">
    <slot name="content">bar fallback</slot>
  </span>
</Foo>

// ./Foo.svelte

<slot name="content">
  foo fallback
</slot> 

REPL