如何像Vue在Svelte中制作无标签插槽模板

Question

我爱上了Svelte，并且试图做像组件一样的可重用的“数据表”。我想通过客户端代码定义标题和行模板，因此我在Table.svelte组件中添加了标题和行插槽。我不想将<tr>的标签暴露给客户的代码，原因是要处理整个行中的某些点击事件，等等。因此，客户的广告位只能提供<td>标签的行模板。

在Vue中，我可以使用“空”标记<template>，该标记根本不显示任何标记。

如何像vue这样精巧地实现这一目标？

Table.svelte

<script>
    import {onMount} from "svelte";

    let rows = [];
    let selected = null;

    onMount(() => {
        setTimeout(() => {
            rows = [
                {number: "01/30/2019"},
                {number: "01/30/2019"},
            ];
        }, 1000)
    });

    const handleSelect = i => () => {
        if (selected === i) {
            selected = null;
        } else {
            selected = i;
        }
    };
</script

<table>
    <thead>
            <tr>
                <slot name="headers"/>
            </tr>
    </thead>
    <tbody>
    {#each rows as row, i}
    <tr on:click={handleSelect(i)} class:is-selected="{selected === i}">
        <slot name="row" {row}  />
    </tr>
    {/each}
    </tbody>
</table>

App.svelte

<script>
    import Table from './Table.svelte'
</script>

<Table>
    <template slot="headers">
        <th>Number</th>
    </template>
    <template slot="row" let:row>
        <td>{row.number}</td>
    </template>
</Table>

这是指向REPL https://svelte.dev/repl/92b3a93855124da7b2d991f38353f744?version=3.12.1

的链接

Answer 1

@JohnnyFun在评论中的回答对我有用。在此处添加示例代码作为答案：

用template和th替换td：

<Table resource="invoices">
    <th slot="headers">Number</th>
    <td slot="row" let:row>
        {row.number}
    </td>
</Table>