Svelte <svelte:component>

2023-02-22 16:03 更新

一个组件可以用 ​<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>


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号