svelte 中另一个组件内的组件

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，而是使用 html 的普通标签，如 div 等，它工作正常。

Answer 1

老实说，你不能在 @html 模板中使用 svelte 组件。

但是您可能可以使用 svelte:component.

取得一些成就

我给你做了一个小例子来演示如何使用它here

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

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

<DataSet {data} />

<script>
    export let component; // pass the DataSet constructor to your component as prop here
    export let data;
</script>

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

svelte 中另一个组件内的组件

Component inside another Component in svelte

svelte