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}