如何安装svelte_使用插槽组成Svelte组件

如何安装svelte

In Svelte components can be composed together using slots. Composition means allowing your components to contain other components or HTML elements. Slots are made possible in Svelte by using the <slot> component inside components that can accept components or markup within.

在Svelte中，可以使用插槽将组件组合在一起。 组合意味着允许您的组件包含其他组件或HTML元素。 通过在组件内部使用<slot>组件可以在Svelte中实现插槽，这些组件可以在其中接受组件或标记。

It’s something that we’re already used to do naturally with HTML elements. Let’s demonstrate how using the <slot> component works by building a simple Card component

我们已经习惯于使用HTML元素来自然地完成这一工作。 让我们通过构建一个简单的Card组件来演示如何使用<slot>组件

This Card component is similar to the one I used to demonstrate using props in Svelte:

该Card组件类似于我用来在Svelte中使用道具演示的组件：

Card.svelte

Card.svelte

<script>
  export let title;
  export let imageUrl;
</script>

<style>
  /* Something to make it look pretty */
</style>

<section>
  <h1>
    <img src={imageUrl} alt="Avatar for {title}" /&