你不能在斯维尔特这样做。

您必须弄清楚如何使用Svelte中提供的API实现相同的结果。

例如,您可以使用 <slot> :

<TabPane
  name="profile"
  key="1"
>
  <img slot="title" src="images/profile.svg" alt="Profile" />
  <!-- some code, eg: -->
  <div>Some code here</div>
</TabPane>

<!-- filename: TabPane.svelte -->

<h1>
  <slot name="title" />
</h1>

<slot />

具有属性的元素 slot="title" 将插入 <slot name="title">

其余的元件将插入 <slot />

这在React中是等效的:

function TabPane({ title, children }) {
  return (
    <>
       <h1>{title}</h1>
       {children}
    </>
  );
}

如果你只想为标题传递字符串,你可以用 <svelte:fragment> 以便您可以添加 slot=“title” 属性

<TabPane
  name="profile"
  key="1"
>
  <svelte:fragment slot="title">
    string title here
  <svelte:fragment>
  <!-- some code, eg: -->
  <div>Some code here</div>
</TabPane>

参考

• Svelte教程: https://svelte.dev/tutorial/slots
• 视频教程: https://www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59

在许多情况下,你会想使用插槽谭建议。但是,可以将组件作为道具传递。为此,我们将利用 <svelte:component> 。限制性很强,但有可能。

https://svelte.dev/docs#svelte_component

<苗条:成分>

通常,你会使用 <苗条:成分> 这样地:

<script>
  import Component from './component.svelte'
</script>

<svelte:component this={Component} foo={bar} />

以上内容相当于:

<script>
  import Component from './component.svelte'
</script>

<Component foo={bar} />

通过支柱传递构件

这意味着我们实际上可以通过道具传递组件。

<!-- app.svelte -->

<script>
  import ComponentA from './component-a.svelte'
  import ComponentB from './component-b.svelte'
</script>

<ComponentA foo={ComponentB} />

并渲染组件

<!-- component-a.svelte -->

<script>
  export let foo
</script>

<svelte:component this={foo} />

注意事项

请注意,有几件事你不能做:

• 在通过道具传递的组件上设置道具
• 传递儿童通过道具的组件
• 或者对作为道具传递的组件执行几乎任何其他操作

Svelte甚至可能不会被设计成这样(即使它有效)。所以,是的,除非你真的需要这个,否则使用插槽。但现在你知道这是可能的。