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

38次阅读

共计 1319 个字符，预计需要花费 4 分钟才能阅读完成。

到目前为止，咱们只解决外部状态，也就是说，只能在给定的组件中拜访这些值。

在任何真正的应用程序中，都须要将数据从一个组件传递到其子组件。要做到这一点，咱们须要申明属性，通常简称为“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}/>

在 neted.svelte 中，咱们能够很容易地为道具指定默认值：

<script>
    export let answer = 'a mystery';
</script>

如果咱们当初增加第二个没有传值的组件，它将会应用默认值：

<Nested answer={42}/>
<Nested/>

输入：

The answer is 42
The answer is a mystery

如果你有一个属性对象，你或者会这样传值：

<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>