如何继承带有 svelte 组件的插槽？

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' -->

请注意，这段代码过于简单，我的真实用例比这复杂一点，我需要在那里使用插槽。

fiddle：https://svelte.dev/repl/5c525651eb8b4f60a6a696c1bd19f723

Answer 1

您似乎想在 Foo 定义的插槽中呈现传递给 Bar 的插槽内容，但目前您尚未在 Bar 中定义插槽，因此有没有地方可以使用传递的内容，因此回退值总是传递给 Foo.

解决方案可能类似于以下内容，在 Bar 内部传递给 Foo 的范围内定义一个 content 插槽内容栏。

// 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

Answer 2

我认为大多数答案都非常接近。我相信您可以通过创建一个内容和名称都具有相同值的插槽来修复它。根据您的示例 (Repl with full 3rd level inheritance)、

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

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

通过这种方式，我们既通过了插槽又包括了我们的新后备。

如果您想确保跨度存在，可以根据您的用例将其放在 slot 内部或外部。

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

如何继承带有 svelte 组件的插槽？

How to inherit slots with svelte components?

javascript

inheritance

svelte