如何动态加载多个苗条组件?

时间:2019-12-17 17:08:51

标签: svelte svelte-3

我为Address提供了一个苗条的组件,用户可以通过单击一个按钮来添加多个收件人(主要,次要等)。我不知道用户会添加多少个地址。我正在努力用Svelte进行建模。我发现最接近的东西是svelte:component,但一次只能加载一个组件。

1 个答案:

答案 0 :(得分:0)

您可以将所有地址保留在一个数组中,并为该数组中的每个元素呈现一个Address组件,并使用例如从组件发出的事件。

示例(REPL

<!-- App.svelte -->
<script>
  import Address from './Address.svelte';
  let addresses = [''];

  function addAddress() {
    addresses = [...addresses, ''];
  }

  function changeAddress(address, index) {
    addresses = addresses.map((a, i) => (i === index ? address : a));
  }
</script>

{#each addresses as address, index}
  <Address value="{address}" on:change="{e => changeAddress(e.target.value, index)}" />
{/each}

<button on:click="{addAddress}">Add address</button>

<!-- Address.svelte -->
<script>
  export let value = '';
</script>

<div>
  <input {value} on:change />
</div>