如何安装svelte_与Svelte一起使用道具

如何安装svelte

Props, popular with other frameworks such as React and Vue.js, are a very efficient way to enable component communication. Props are used in Svelte as you’d expect. They are passed top-down from parent components to children and are used to specify data that the component can consume to inform what it renders in the DOM.

在其他框架(例如React和Vue.js)中流行的道具是启用组件通信的非常有效的方法。 正如您期望的那样，在Svelte中使用了道具。 它们从上到下从父级组件传递到子级，用于指定组件可以使用以通知其在DOM中呈现的数据。

Let’s demonstrate how to make use of props by building a simple Card component:

让我们通过构建一个简单的Card组件来演示如何使用道具：

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

<style>
  h1 {
    color: coral;
  }
  section {
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.1);
    max-width: 600px;
    margin: 1rem auto;
    padding: 1rem 2rem;
  }
  img {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    vertical-align: middle;
  }
</style>

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

  <p>{description}</p>
</section>

As you can see, you let Svelte know about the props that a component accepts by using the ES6 export syntax. You can then make use of the props inside the component with simple value interpolation.

如您所见，您可以使用ES6 export语法让Svelte知道组件可以接受的道具。 然后，您可以通过简单的值插值来使用组件内部的道具。

You can then make use of the component by providing the props like this:

然后，您可以通过提供以下道具来利用组件：

Parent.svelte

亲子

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="See you later, Alligator"
  imageUrl="https://alligator.io/images/alligator-logo3.svg"
  description="Not so soon, baboon!" />

可选道具的默认值 (Default Values for Optional Props)

With our current setup, if we fail to pass in a prop, Svelte will complain with a warning in the console:

在当前设置下，如果我们无法通过道具，Card.svelte将在控制台中发出警告：

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="See you later, Alligator"
  description="Not so soon, baboon!" />

With this, the warning will be: <Card> was created without expected prop 'imageUrl'.

这样，警告将是： <Card> was created without expected prop 'imageUrl' 。

To fix that, we can provide a default value for any prop declared, using something like this:

为了解决这个问题，我们可以为任何声明的prop提供一个默认值，如下所示：

<script>
  export let title;
  export let description = "Description coming soon!";
  export let imageUrl = "https://picsum.photos/64";
</script>

<style>
  /* ... */
</style>

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

  <p>{description}</p>
</section>

And now you can use the Card component without passing-in a description or imageUrl and the component will revert to the default values:

现在，您可以使用Card组件而无需传入description或imageUrl ，该组件将恢复为默认值：

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="Tood-a-loo, Kangaroo!" />

传播道具 (Spreading Props)

Similar to how you can spread props in JSX, Svelte allows you to spread props from an object in your code, to avoid the extra typing.

与在JSX中传播道具的方式类似，Svelte允许您从代码中的对象传播道具，以避免额外的输入。

Here’s an example where spreading props is compared against typing in the props in the long form:

这是一个示例，其中比较了传播道具与以长格式键入道具的情况：

<script>
  import Card from "./Card.svelte";

  const items = [
    {
      id: 1
      title: "Pirate",
      description: "Argg!!",
      imageUrl: "https://alligator.io/images/pirate.svg"
    },
    {
      id: 2
      title: "Chef",
      description: "À la soupe!",
      imageUrl: "https://alligator.io/images/chef.svg"
    }
  ];
</script>

<!-- Without spread: -->
{#each items as item}
  <Card
    title={item.title}
    description={item.description}
    imageUrl={item.imageUrl}
  />
{/each}

<!-- With spread: -->
{#each items as item}
  <Card {...item} />
{/each}

Note how it doesn’t matter that when we spread the props from our objects in items an extra property (id) is also passed-in. The Card component doesn’t declare it’s use of id as a prop, so it’s just ignored.

请注意，当我们将物品中的道具散布在items ，还传入了一个额外的属性( id )没关系。 Card组件未声明将id用作道具，因此将其忽略。

As you can see in the above example, I’m also making use of an each block for logic inside my markup. I’ll cover what Svelte makes available for logic in components in a future post, but you can also read all about it in the Svelte tutorial

正如您在上面的示例中看到的那样，我还在标记中使用了每个逻辑块 。 我将在以后的文章中介绍Svelte在组件逻辑中的可用功能，但是您也可以在Svelte教程中阅读所有内容。

翻译自: https://www.digitalocean.com/community/tutorials/svelte-using-props

如何安装svelte