测试 svelte 动态组件

Question

我不久前首次使用 Svelte 并开始了一个项目，但我遇到了一些组件问题。

我有 2 个数组（boxes1 和 boxes2），它们的内容显示在 2 个不同的 div 内的每个循环中，彼此相邻。我们可以通过单击添加按钮向每个数组添加元素：左边的元素用于 boxes1，右边的元素用于 boxes2。两个数组中的每个元素都有一个从 1 开始的 id，每次删除数组中的所有元素时都会重置为 1。 div 中的每个奇数元素都是基于红色背景组件的动态组件。 div 中的每个偶数元素都是基于蓝色背景组件的动态组件。两个 div 中的每个元素都可以通过单击元素内的按钮来删除：通过单击按钮，元素内的组件向父组件发送一个事件，以便该元素在被销毁之前从数组中删除.

问题是： 将一些元素添加到一个数组然后将其全部删除，然后再次添加元素后，添加的第一个元素未显示在 div 但存在于数组中。删除所有元素后不重置 id 解决了问题，但我需要重置它。

我能理解我的解释很混乱所以这里是REPL： https://svelte.dev/repl/ae13251cf3ac4c12ba10eabe20f376d1?version=3.44.0

Answer 1

问题出在这里 on:destroy 您设置了 show = false，因此当您从数组 show = false 中删除最后一个元素时，这就是第一个组件未显示的原因。您可以像这样更新 Box.svelte 组件：

<script>
  import { onMount, createEventDispatcher } from "svelte";
    
  export let template;
  export let templateProps;

  let show = true;

  const dispatch = createEventDispatcher();
    
    $: if(templateProps && templateProps.heading == 0){
        show = true;
    }

  const destroy = () => {
    show = false;
    dispatch("destroy");
  };
</script>

{#if show}
  <svelte:component
    this={template}
    on:close={() => destroy()}
    {...templateProps}
  />
{/if}

测试 svelte 动态组件

Testing svelte dynamic components

svelte

svelte-component

svelte-3