使用 Svelte 组件作为插槽

huangapple go评论70阅读模式
英文:

Use Svelte Component as Slot

问题

我试图构建一个新的Svelte应用程序。因此,我有以下的Main.svelte文件:

<script>
    import TitleSlide from '../lib/slides/TitleSlide.svelte'
</script>
<TitleSlide>
    <span slot="title">To infinity and beyond</span>
    <span slot="caption">or story about toys</span>
</TitleSlide>

TitleSlide.svelte文件有2个插槽:

<section>
    <h1>
        <slot name="title">
            <span class="missing">Unknown title</span>
        </slot>
    </h1>
    <p class="fragment">
        <slot name="caption"></slot>
    </p>
</section>

它工作得很好,下一步,我将Main.svelte重写为:

<script>
    import TitleSlide from '../lib/slides/TitleSlide.svelte'
    import Title from '../lib/partial/Title.svelte'
    import Caption from '../lib/partial/Caption.svelte'
</script>
<TitleSlide>
    <Title slot="title">To infinity and beyond</Title>
    <Caption slot="caption">or story about toys</Caption>
</TitleSlide>

还有简单的Title.svelteCaption.svelte

<slot>
    <span class="missing">Unknown title/caption</span>
</slot>

但看起来有点奇怪,我想使用更简化的语法,就像这样:

<script>
    import TitleSlide from '../lib/slides/TitleSlide.svelte'
    import Title from '../lib/partial/Title.svelte'
    import Caption from '../lib/partial/Caption.svelte'
</script>
<TitleSlide>
    <Title>To infinity and beyond</Title>
    <Caption>or story about toys</Caption>
</TitleSlide>

换句话说,我想将组件用作插槽,我想创建两个组件TitleCaption,并为它们设置目标插槽。

我不确定是否可能实现这个 使用 Svelte 组件作为插槽

英文:

I trying to build a new Svelte application.
So, I have the following Main.svelte file:

&lt;script&gt;
    import TitleSlide from &#39;../lib/slides/TitleSlide.svelte&#39;
&lt;/script&gt;
&lt;TitleSlide&gt;
    &lt;span slot=&quot;title&quot;&gt;To infinity and beyond&lt;/span&gt;
    &lt;span slot=&quot;caption&quot;&gt;or story about toys&lt;/span&gt;
&lt;/TitleSlide&gt;

File TitleSlide.svelte has 2 slots:

&lt;section&gt;
    &lt;h1&gt;
        &lt;slot name=&quot;title&quot;&gt;
            &lt;span class=&quot;missing&quot;&gt;Unknown title&lt;/span&gt;
        &lt;/slot&gt;
    &lt;/h1&gt;
    &lt;p class=&quot;fragment&quot;&gt;
        &lt;slot name=&quot;caption&quot;&gt;&lt;/slot&gt;
    &lt;/p&gt;
&lt;/section&gt;

It works great, next step I rewrite Main.svelte to this:

&lt;script&gt;
    import TitleSlide from &#39;../lib/slides/TitleSlide.svelte&#39;
    import Title from &#39;../lib/partial/Title.svelte&#39;
    import Caption from &#39;../lib/partial/Caption.svelte&#39;
&lt;/script&gt;
&lt;TitleSlide&gt;
    &lt;Title slot=&quot;title&quot;&gt;To infinity and beyond&lt;/Title&gt;
    &lt;Caption slot=&quot;caption&quot;&gt;or story about toys&lt;/Caption&gt;
&lt;/TitleSlide&gt;

And simple Title.svelte and Caption.svelte:

&lt;slot&gt;
    &lt;span class=&quot;missing&quot;&gt;Unknown title/caption&lt;/span&gt;
&lt;/slot&gt;

But it looks strange, I want to use more simplified syntax like this:

&lt;script&gt;
    import TitleSlide from &#39;../lib/slides/TitleSlide.svelte&#39;
    import Title from &#39;../lib/partial/Title.svelte&#39;
    import Caption from &#39;../lib/partial/Caption.svelte&#39;
&lt;/script&gt;
&lt;TitleSlide&gt;
    &lt;Title&gt;To infinity and beyond&lt;/Title&gt;
    &lt;Caption&gt;or story about toys&lt;/Caption&gt;
&lt;/TitleSlide&gt;

So in other words, I want to use Component as Slot, I want to create two Components Title and Caption, and set up a target slot for them.

I'm not sure if it is possible or not 使用 Svelte 组件作为插槽

答案1

得分: 1

以下是翻译好的部分:

无法拥有两个默认插槽。所以如果您不喜欢使用有些笨拙的插槽命名,我认为您只有两个其他选择。首先,您可以将所有内容移动到TitleSlide中,像这样。

Main.svelte 只需如下所示:

<script>
    import TitleSlide from '../lib/slides/TitleSlide.svelte'
</script>
<TitleSlide />

然后您的 TitleSlide.svelte 可以是这样的(您显然可以将数据作为 props 传递到 TitleSlide 中,以便在整个网站中重复使用,但我现在不考虑这个):

<script>
    import Title from '../lib/partial/Title.svelte'
    import Caption from '../lib/partial/Caption.svelte'
</script>

<section>
    <h1>
        <Title>无限尽头和更远处</Title>
    </h1>
    <p class="fragment">
        <Caption>或者是有关玩具的故事</Caption>
    </p>
</section>

或者,您可以放弃 TitleSlide,然后您的 Main.svelte 变成这样:

<section>
    <Title>无限尽头和更远处</Title>
    <Caption>或者是有关玩具的故事</Caption>
</section>

然后在您的各个组件中,您可以添加在 TitleSlide 中的标记。在 Title.svelte 中会像这样:

<h1>
    <slot>
        <span class="missing">未知标题/说明</span>
    </slot>
</h1>
英文:

You can't have two default slots. So if you don't like using the somewhat clunking slot naming then I think you've only got two other options. First you can move everything into TitleSlide like this.

Main.svelte would just be:

&lt;script&gt;
    import TitleSlide from &#39;../lib/slides/TitleSlide.svelte&#39;
&lt;/script&gt;
&lt;TitleSlide /&gt;

and then your TitleSlide.svelte could be (you can obviously pass data into TitleSlide as props for reusing throughout your website, but I'm ignoring that for now):

&lt;script&gt;
    import Title from &#39;../lib/partial/Title.svelte&#39;
    import Caption from &#39;../lib/partial/Caption.svelte&#39;
&lt;/script&gt;

&lt;section&gt;
    &lt;h1&gt;
        &lt;Title&gt;To infinity and beyond&lt;/Title&gt;
    &lt;/h1&gt;
    &lt;p class=&quot;fragment&quot;&gt;
        &lt;Caption&gt;or story about toys&lt;/Caption&gt;
    &lt;/p&gt;
&lt;/section&gt;

Alternately you could do away with TitleSlide and then your Main.svelte becomes this:

&lt;section&gt;
    &lt;Title&gt;To infinity and beyond&lt;/Title&gt;
    &lt;Caption&gt;or story about toys&lt;/Caption&gt;
&lt;/section&gt;

And then in your individual components you could add the markup that was in TitleSlide. It'd look like this in Title.Svelte

&lt;h1&gt;
    &lt;slot&gt;
        &lt;span class=&quot;missing&quot;&gt;Unknown title/caption&lt;/span&gt;
    &lt;/slot&gt;
&lt;/h1

答案2

得分: 1

这是目前不可能的。唯一可以分配而无需命名的插槽是 default 插槽。

英文:

This is not possible right now. The only slot that can be assigned without naming it, is the default slot.

huangapple
  • 本文由 发表于 2023年3月21日 00:11:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/75792725.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定