英文:
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.svelte
和Caption.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>
换句话说,我想将组件用作插槽,我想创建两个组件Title
和Caption
,并为它们设置目标插槽。
我不确定是否可能实现这个
英文:
I trying to build a new Svelte application.
So, I have the following Main.svelte
file:
<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>
File TitleSlide.svelte
has 2 slots:
<section>
<h1>
<slot name="title">
<span class="missing">Unknown title</span>
</slot>
</h1>
<p class="fragment">
<slot name="caption"></slot>
</p>
</section>
It works great, next step I rewrite Main.svelte
to this:
<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>
And simple Title.svelte
and Caption.svelte
:
<slot>
<span class="missing">Unknown title/caption</span>
</slot>
But it looks strange, I want to use more simplified syntax like this:
<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>
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
答案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:
<script>
import TitleSlide from '../lib/slides/TitleSlide.svelte'
</script>
<TitleSlide />
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):
<script>
import Title from '../lib/partial/Title.svelte'
import Caption from '../lib/partial/Caption.svelte'
</script>
<section>
<h1>
<Title>To infinity and beyond</Title>
</h1>
<p class="fragment">
<Caption>or story about toys</Caption>
</p>
</section>
Alternately you could do away with TitleSlide
and then your Main.svelte
becomes this:
<section>
<Title>To infinity and beyond</Title>
<Caption>or story about toys</Caption>
</section>
And then in your individual components you could add the markup that was in TitleSlide. It'd look like this in Title.Svelte
<h1>
<slot>
<span class="missing">Unknown title/caption</span>
</slot>
</h1
答案2
得分: 1
这是目前不可能的。唯一可以分配而无需命名的插槽是 default
插槽。
英文:
This is not possible right now. The only slot that can be assigned without naming it, is the default
slot.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论