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

Posted 2023-03-07

【中文标题】如何动态加载多个苗条组件？

【英文标题】：How to load multiple svelte components dynamically?

【发布时间】：2020-04-10 05:41:48

【问题描述】：

我有一个用于Address 的精简组件，用户可以通过单击按钮添加多个收件人（主要、次要、其他等）。我不知道用户会添加多少地址。我正在努力用 Svelte 建模。我找到的最接近的东西是svelte:component，但它一次只允许加载一个组件。

【参考方案1】：

您可以将所有地址保存在一个数组中，并为该数组中的每个元素呈现一个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>