Svelte插槽：组件中的组件

2023-12-23 06:01:38

Svelte插槽概述

Svelte插槽是组件中特殊标记，用于容纳子组件。在组件的模板中定义插槽，然后在子组件的模板中引用它们。这样，子组件可以插入到父组件的插槽中，从而创建更复杂的组件层次结构。

如何使用Svelte插槽

要使用Svelte插槽，您需要在父组件的模板中定义一个插槽，然后在子组件的模板中引用它。

在父组件中定义插槽

在父组件的模板中，使用 <slot> 标签来定义插槽。您可以为插槽指定一个名称，以便在子组件中引用它。例如：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中引用插槽

在子组件的模板中，使用 <slot> 标签来引用父组件的插槽。您可以使用 name 属性来指定要引用的插槽名称。例如：

<template>
  <header>
    <h1>{{ title }}</h1>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <p>Copyright {{ year }}</p>
  </footer>
</template>

传递数据到子组件

您可以通过插槽将数据从父组件传递到子组件。为此，您可以在父组件的模板中使用 <slot> 标签的 props 属性来指定要传递的数据。例如：

<template>
  <div>
    <slot name="header" props="{ title }"></slot>
    <slot></slot>
    <slot name="footer" props="{ year }"></slot>
  </div>
</template>

在子组件的模板中，您可以使用 # 符号来访问父组件传递的数据。例如：

<template>
  <header>
    <h1>{{ #title }}</h1>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <p>Copyright {{ #year }}</p>
  </footer>
</template>