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

爱被打了一巴掌 2022-11-27 04:29 15阅读 0赞

如何安装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`组件来演示如何使用道具：

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

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

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

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

Parent.svelte

亲子

## 可选道具的默认值 **(**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将在控制台中发出警告：

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提供一个默认值，如下所示：

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` ，该组件将恢复为默认值：

## 传播道具 **(**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中传播道具的方式][spread props in JSX]类似，Svelte允许您从代码中的对象传播道具，以避免额外的输入。

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

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

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教程中][Svelte tutorial]阅读所有内容。

> 翻译自: [https://www.digitalocean.com/community/tutorials/svelte-using-props][https_www.digitalocean.com_community_tutorials_svelte-using-props]

如何安装svelte

[ES6 _export_ syntax]: https://alligator.io/js/modules-es6/#exporting
[spread props in JSX]: https://www.digitalocean.com/react/jsx-introduction/#spreading-props
[Svelte tutorial]: https://svelte.dev/tutorial/each-blocks
[https_www.digitalocean.com_community_tutorials_svelte-using-props]: https://www.digitalocean.com/community/tutorials/svelte-using-props