Sveltesveltecomponent

Svelte <svelte:component>

一个组件可以用 ​<svelte:component>​ 改变它的类别。而不是一系列 ​if​ 块......{#if selected.color === 'red'}

<RedThing/>

{:else if selected.color === 'green'}

<GreenThing/>

{:else if selected.color === 'blue'}

<BlueThing/>

{/if}...我们可以有一个动态组件：<svelte:component this={selected.component}/>​this​ 值可以是任何组件构造函数，也可以是 falsy 值——如果它是 falsy，则不会呈现任何组件。示例代码App.svelte<script>

import RedThing from './RedThing.svelte';

import GreenThing from './GreenThing.svelte';

import BlueThing from './BlueThing.svelte';

const options = [
    { color: 'red',   component: RedThing   },
    { color: 'green', component: GreenThing },
    { color: 'blue',  component: BlueThing  },
];
let selected = options[0];

</script>

<select bind:value={selected}>

{#each options as option}

<option value={option}>{option.color}</option>

{/each}

</select>

<svelte:component this={selected.component}/>BlueThing.svelte<style>

strong { color: blue; }

</style>

<strong>blue thing</strong>GreenThing.svelte<style>

strong { color: green; }

</style>

<strong>green thing</strong>RedThing.svelte<style>

strong { color: red; }

</style>

<strong>red thing</strong>