Question

我用svelte编写了以下组件。

DataTableTest.svelte

<script>
  export let title;
  export let data;
  export let columns = [];
</script>

{title}
<table>
  {#if columns}
    <tr>
      {#each columns as c}
        <td>{c.label}</td>
      {/each}
    </tr>
  {/if}
  {#if data}
    <tbody>
      {#each data as d, i}
        <tr>
          {#each columns as c}
              <td>
              {@html d[c.property] ? d[c.property] : ''}
              </td>
          {/each}
        </tr>
      {/each}
    </tbody>
  {/if}
</table>

现在，我想创建这个组件，但是在其中，我再次想要使用相同的组件，如下所示：

import DataTableTest from "./DataTableTest.svelte";

let columns = [
    {
      label: "ABC",
      property: "abc"
    },
    {
      label: "Items",
      property: "items"
    }
  ];


let data = [
  {
    "abc": "dsaaads",
    "items": "<DataTableTest title=\"dsaadsa\">",
  }

</script>


<DataTableTest title="Test" {data} {columns} />

但这行，

<DataTableTest title=\"dsaadsa\">

什么也没做。如果我不是使用DataTableTest而是使用div等html的普通标签，则可以正常工作。

Answer 1

Afaik，您不能在@html模板中使用svelte组件。

但是，您可能可以使用svelte:component来达成目标。

我为您提供了一个小例子来演示如何使用它here

但是基本上，您需要在数据结构中传递元素构造函数，然后通过将自定义元素的构造函数传递给svelte:component道具来使用this元素实例化它。

<script>
    import DataSet from './DataSet.svelte'
    let data = DataSet;
</script>

<DataSet {data} />

<script>
    export let data;
</script>

<!-- your component here -->
<svelte:component this={data} />

另一个组件中的组件

1 个答案: