属性 / Default values • Svelte 教程 | Svelte 中文网
属性
Declaring props
到目前为止，我们只处理了内部状态——也就是说，这些值只能在给定的组件中访问。 在任何实际应用程序中，都需要将数据从一个组件向下传递到其子组件。为此，我们需要声明属性，通常缩写为“props”。在 Svelte 中，我们使用关键字export来做到这一点
app.svelte
<script>
import Nested from './Nested.svelte';
</script>
<Nested answer={42}/>Nested.svelte
<script>
export let answer;
</script>
<p>The answer is {answer}</p>可以将export删除来看前后对比
一个会输出The answer is 42，一个是The answer is undefined
Default values
我们重新修改一下代码
app.svelte
<script>
import Nested from './Nested.svelte';
</script>
<Nested answer={42}/>
<Nested/>Nested.svelte
<script>
export let answer = 'a mystery';
</script>
<p>The answer is {answer}</p>那这样子最后的输出是什么
The answer is 42
The answer is a mystery
前面一个42是，因为引入了answer的定义值
后面因为没有了，就变成Nested中的默认值了
属性传递
如果组件中含有一个对象属性，可以利用...语法将它们传到一个组件上，这样子就不用一个一个的指定
相反，如果你需要引用传递到组件中的所有道具，包括未使用
export声明的道具，可以利用$$props直接获取。但通常不建议这么做，因为Svelte难以优化，但在极少数情况下很有用。
Info.svelte
<script>
export let name;
export let version;
export let speed;
export let website;
</script>
<p>
The <code>{name}</code> package is {speed} fast.
Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
</p>app.svelte
<script>
import Info from './Info.svelte';
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>
/*<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>*/
<Info {...pkg}/>逻辑
if
HTMl没有表达逻辑的方式，但if可以被包装在一个块中
比如下面这样子
<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}
{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if}else
因为上面代码中的两个条件是互斥的，所以其实可以用else来简化组件
<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if}#开始，/结束，: 中间插入
else if
将多个条件链接在一起的时候就需要 else if 上场了
<script>
let x = 7;
</script>
{#if x > 10}
<p>{x} is greater than 10</p>
{:else if 5 > x}
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
{/if}each遍历
遇见需要进行遍历的数据列表
遇到数组或类似于数组的对象 (即具有length 属性)。都可以通过 each [...iterable]遍历迭代该对象。
<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats </h1>
<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.baidu.com/">
{cat.name}
</a></li>
{/each}
</ul>
<ul>
{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a></li>
{/each}
</ul>each添加key值
一般来说，当你修改each 块中的值时，它将会在 尾端 进行添加或删除条目，并更新所有变化， 这可能不是你想要的效果。
Thing.svelte
<script>
// `current` is updated whenever the prop value changes...
export let current;
// ...but `initial` is fixed upon initialisation
const initial = current;
</script>
<p>
<span style="background-color: {initial}">initial</span>
<span style="background-color: {current}">current</span>
</p>
<style>
span {
display: inline-block;
padding: 0.2em 0.5em;
margin: 0 0.2em 0.2em 0;
width: 4em;
text-align: center;
border-radius: 0.2em;
color: white;
}
</style>App.svelte
<script>
import Thing from './Thing.svelte';
let things = [
{ id: 1, color: '#0d0887' },
{ id: 2, color: '#6a00a8' },
{ id: 3, color: '#b12a90' },
{ id: 4, color: '#e16462' },
{ id: 5, color: '#fca636' }
];
function handleClick() {
things = things.slice(1);
}
</script>
<button on:click={handleClick}>
Remove first thing
</button>
{#each things as thing}
<Thing current={thing.color}/>
{/each}可以运行上面的代码进行实例查看，尝试多次点击'Remove first thing' 按钮，这时<Thing> 组件是从尾端开始被移除，这显然不是我们想要的，我们希望是从上至下依次开始删除组件。
很明显，他直接删除的是最下面的initial，为此，我们为 each 块指定一个唯一标识符，作为 key 值：
{#each things as thing (thing.id)}
<Thing current={thing.color}/>
{/each} 
(thing.id)告诉 Svelte 什么地方需要改变。可以将任何对象用作 key 来使用，就像Svelte 用 Map 在内部作为key一样，换句话说，你可以用 (thing) 来代替 (thing.id)作为 key 值。但是，使用字符串或者数字作为 key 值通常更安全，因为这能确保它的唯一性，例如，使用来自API服务器的新数据进行更新时。
Await
很多Web应用程序都可能在某个时候有需要处理异步数据的需求。使用 Svelte 在标签中使用 await 处理promises 数据亦是十分容易：
promise总是获取最新的信息，无需关心 rece 状态。
<script>
let promise = getRandomNumber();
async function getRandomNumber() {
const res = await fetch(`tutorial/random-number`);
const text = await res.text();
if (res.ok) {
return text;
} else {
throw new Error(text);
}
}
function handleClick() {
promise = getRandomNumber();
}
</script>
<button on:click={handleClick}>
generate random number
</button>
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}Promise 是 JavaScript 中用于处理异步操作的一种机制。它代表了一个异步操作的最终完成或失败，并且可以将相关的处理逻辑附加到这个操作上。
在 JavaScript 中，异步操作通常涉及到网络请求、文件读取、定时器等需要花费一定时间才能完成的任务。
传统的回调函数方式处理异步操作可能会导致回调地狱（callback hell）和难以理解的代码结构。而 Promise 则提供了一种更清晰和可靠的方式来处理异步操作。
一个 Promise 对象有三种状态：
Pending（进行中）：初始状态，表示异步操作尚未完成，也未失败。
Fulfilled（已完成）：表示异步操作成功完成。
Rejected（已失败）：表示异步操作失败。
一个 Promise 对象可以通过调用 resolve 函数来将其状态从 pending 变为 fulfilled，也可以通过调用 reject 函数将其状态从 pending 变为 rejected。一旦状态发生改变，Promise 对象的状态就不会再改变，它的状态一旦改变，就会一直保持在当前状态，直到被处理（通过 .then() 或 .catch() 方法）。
在使用 Promise 的时候，通常会使用 .then() 方法来处理异步操作成功时的情况，使用 .catch() 方法来处理异步操作失败时的情况。