关于前端:Svelte教程翻译二Props

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