在Svelte中传递组件列表

// Parent.svelte

import { createContext, setContext } from 'svelte';
import { onMount } from 'svelte';

// 创建一个上下文
const ComponentListContext = createContext([]);

export let components = [];

onMount(() => {
  // 设置上下文的组件列表
  setContext(ComponentListContext, components);
});

<!-- Parent.svelte -->

<script>
  import { setContext } from 'svelte';
  import Child from './Child.svelte';

  let components = [];

  // 添加一个组件到组件列表
  function addComponent() {
    components = [...components, Child];
  }

  // 移除最后一个组件
  function removeComponent() {
    components = components.slice(0, -1);
  }
</script>

<h1>Parent Component</h1>

<button on:click={addComponent}>Add Component</button>
<button on:click={removeComponent}>Remove Component</button>

{#each components as component}
  <!-- 将每个组件渲染到子组件中 -->
  <ChildComponent {component} />
{/each}

<!-- Child.svelte -->

<script>
  export let component;
</script>

<div>{@html new component()}</div>