在Sapper中,我仅尝试在呈现为客户端(使用onMount
)时导入组件。是否有类似于ReactSuspense
和的东西React.lazy
?还是有另一种方法?
您当然可以这样做,是的:
<script>
import { onMount } from 'svelte';
let Thing;
onMount(async () => {
Thing = (await import('./Thing.svelte')).default;
});
</script>
<svelte:component this={Thing} answer={42}>
<p>some slotted content</p>
</svelte:component>
或者,您可以将其包装到组件中:
<!-- Loader.svelte -->
<script>
import { onMount } from 'svelte';
let loader;
let Component;
onMount(async () => {
Component = (await loader()).default;
});
export { loader as this };
</script>
<svelte:component this={Component} {...$$restProps}>
<slot></slot>
</svelte:component>
{#if !Component}
<slot name="fallback"></slot>
{/if}
<Loader
this={() => import('./Thing.svelte')}
answer={42}
>
<p>some slotted content</p>
<p slot="fallback">loading...</p>
</Loader>
演示在这里。这种方法的一个警告是,除了插槽之外的其他插槽default
都不会“转发”到基础组件。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句