如何安装svelte_如何在Card.svelte使用道具

如何安装svelte

You can import a Svelte component into any other component using the syntax import ComponentName from 'componentPath':

您可以使用import ComponentName from 'componentPath'的语法import ComponentName from 'componentPath'将Svelte组件导入任何其他组件：

<script>
import SignupForm from './SignupForm.svelte';
</script>

The path is relative to the current component path. ./ means “this same folder”. You’d use ../ to go back one folder, and so on.

该路径是相对于当前组件路径的。 ./表示“该文件夹”。 您将使用../返回一个文件夹，依此类推。

Once you do so, you can use the newly imported component in the markup, like an HTML tag:

完成后，您可以在标记中使用新导入的组件，例如HTML标签：

<SignupForm />

In this way, you are forming a parent/child relationship between the two components: the one that imports, and the one that is imported.

通过这种方式，您将在两个组件之间形成父/子关系：一个是导入的，另一个是导入的。

Often you want to have the parent component pass data to the child component.

通常，您希望让父组件将数据传递给子组件。

You can do so using props. Props behave similarly to attributes in plain HTML, and they are a one-way form of communication.

您可以使用道具来这样做。 道具的行为与纯HTML中的属性类似，它们是一种单向通信形式。

In this example we pass the disabled prop, passing the JavaScript value true to it:

在此示例中，我们传递了disabled prop，并将JavaScript值true传递给了它：

<SignupForm disabled={true}/>

In the SignupForm component, you need to export the disabled prop, in this way:

在SignupForm组件中，您需要通过以下方式导出 disabled道具：

<script>
  export let disabled
</script>

This is the way you express the fact that the prop is exposed to parent components.

这是您表达道具暴露于父部件的事实的方式。

When using the component, you can pass a variable instead of a value, to change it dynamically:

使用组件时，可以传递变量而不是值来动态更改它：

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>

<SignupForm disabled={disabled}/>

When the disabled variable value changes, the child component will be updated with the new prop value. Example:

当disabled变量值更改时，子组件将使用新的prop值进行更新。 例：

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>

<SignupForm disabled={disabled}/>

翻译自: https://flaviocopes.com/svelte-props/

如何安装svelte