共计 1319 个字符,预计需要花费 4 分钟才能阅读完成。
Props
到目前为止,咱们只解决外部状态,也就是说,只能在给定的组件中拜访这些值。
在任何真正的应用程序中,都须要将数据从一个组件传递到其子组件。要做到这一点,咱们须要申明属性,通常简称为“props”。在 Svelte 中,咱们应用 export
关键字来实现这一点。编辑 Nested.svelte 组件:
<script>
export let answer;
</script>
<p>The answer is {answer}</p>
就像 $:,刚开始可能会感觉有点奇怪。在 JavaScript 模块中导出通常不是这样工作的!当初就顺其自然吧ーー它很快就会成为你的第二天性。
App.svelte 文件:
<script>
import Nested from './Nested.svelte';
</script>
<Nested answer={42}/>
Props 默认值
在 neted.svelte 中,咱们能够很容易地为道具指定默认值:
<script>
export let answer = 'a mystery';
</script>
如果咱们当初增加第二个没有传值的组件,它将会应用默认值:
<Nested answer={42}/>
<Nested/>
输入:
The answer is 42
The answer is a mystery
Props 传值
如果你有一个属性对象,你或者会这样传值:
<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}/>
但在 Svelte 中,你能够这样:
<script>
import Info from './Info.svelte';
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>
<Info {...pkg}/>
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>
当然,如果须要援用传递到组件中的所有键值,包含那些没有通过
export
申明的键值,则能够间接拜访$props
。个别不举荐应用,因为 Svelte 很难进行优化,但在多数状况下十分有用。
如果想亲自演练以上的性能,能够稳步到 Sevlte 官网教程中亲自体验:Props
正文完