Sveltesvelteself

Svelte <svelte:self>

Svelte 提供了多种内置元素。第一个，​<svelte:self>​，允许组件递归地包含自己。它对于像文件夹树视图这样的东西很有用，其中文件夹可以包含其他文件夹。在 ​Folder.svelte​ 中，我们希望能够做到这一点......{#if file.type === 'folder'}

<Folder {...file}/>

{:else}

<File {...file}/>

{/if}...但这是不可能的，因为模块无法导入自身。相反，我们使用 ​<svelte:self>​：{#if file.type === 'folder'}

<svelte:self {...file}/>

{:else}

<File {...file}/>

{/if}示例代码App.svelte<script>

import Folder from './Folder.svelte';

let root = [
    {
        type: 'folder',
        name: 'Important work stuff',
        files: [
            { type: 'file', name: 'quarterly-results.xlsx' }
        ]
    },
    {
        type: 'folder',
        name: 'Animal GIFs',
        files: [
            {
                type: 'folder',
                name: 'Dogs',
                files: [
                    { type: 'file', name: 'treadmill.gif' },
                    { type: 'file', name: 'rope-jumping.gif' }
                ]
            },
            {
                type: 'folder',
                name: 'Goats',
                files: [
                    { type: 'file', name: 'parkour.gif' },
                    { type: 'file', name: 'rampage.gif' }
                ]
            },
            { type: 'file', name: 'cat-roomba.gif' },
            { type: 'file', name: 'duck-shuffle.gif' },
            { type: 'file', name: 'monkey-on-a-pig.gif' }
        ]
    },
    { type: 'file', name: 'TODO.md' }
];

</script>

<Folder name="Home" files={root} expanded/>File.svelte<script>

export let name;

$: type = name.slice(name.lastIndexOf('.') + 1);

</script>

<style>

span {

padding: 0 0 0 1.5em;

background: 0 0.1em no-repeat;

background-size: 1em 1em;

}

</style>

<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>Folder.svelte<script>

import File from './File.svelte';

export let expanded = false;
export let name;
export let files;
function toggle() {
    expanded = !expanded;
}

</script>

<style>

span {

padding: 0 0 0 1.5em;

background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;

background-size: 1em 1em;

font-weight: bold;

cursor: pointer;

}

.expanded {
    background-image: url(tutorial/icons/folder-open.svg);
}
ul {
    padding: 0.2em 0 0 0.5em;
    margin: 0 0 0 0.5em;
    list-style: none;
    border-left: 1px solid #eee;
}
li {
    padding: 0.2em 0;
}

</style>

<span class:expanded on:click={toggle}>{name}</span>

{#if expanded}

<ul>

{#each files as file}

<li>

{#if file.type === 'folder'}

<svelte:self {...file}/>

{:else}

<File {...file}/>

{/if}

</li>

{/each}

</ul>

{/if}