如何访问插槽中传递的元素到 Svelte 中的子组件？

Question

我正在为我的应用程序开发一个表格组件。父组件会将数据传递给要渲染的表。除了数据，它还传递一个槽，其中包含为表中的每一行呈现的操作。动作必须作为插槽传递，因为它们可以变化。

在示例中，我想要实现的是，当更改类选择值时，隐藏的保存按钮变为可见（仅适用于该行），这需要从父方法“onClassChanged”中发生。

App.svelte

<script lang="ts">
    import Table from "/src/components/DataTable/DataTable.svelte";
    import {onMount} from "svelte";

    export let transaction = 0;
    let transactions: Array<Type.Transaction.Bank.Record> = [];
    let classes: Array<Type.Transaction.Bank.Class> = [];
    let transactionService = new Transaction();

    async function loadTransactions() {
        let result = await transactionService.get();
        if (result) {
            transactions = result['transactions'];
        }
    }

    onMount(async () => {
        await loadTransactions();
    });


    function onClassChanged() {
        console.log('class changed');
    }
</script>

<h1>Transactions</h1>
{#if transactions.length > 0}
    <Table rows={transactions}>
        <div slot="actions">
            <select on:change={onClassChanged}>
                {#each classes as tx_class}
                    <option value="1">Class A</option>
                    <option value="2">Class B</option>
                {/each}
            </select>
            <button style="display: none">Save</button>
        </div>
    </Table>
{/if}

DataTable.svelte

<script lang="ts">
    export let rows: Array<[]>;
</script>

<div class="datatable">
    {#each rows as row}
        <div class="table-row">
            <div class="table-cell">
                {row.id}
            </div>
            <div class="table-cell">
                {row.description}
            </div>
            <div class="table-cell">
                {row.date}
            </div>
            <div class="table-cell">
                <slot name="actions" id="{row.id}"></slot>
            </div>
        </div>
    {/each}
</div>

我不知道该怎么做，所以欢迎任何想法/解决方案。

Answer 1

如果您希望行在控制来自父级的内容的同时单独跟踪状态，那么最好将您的 DataTable 组件分解为 DataRow 组件。

完成此操作后，跟踪更改只需拥有一个与表中的行数相同大小的布尔数组，然后对onClassChange 处理程序进行柯里化以接受索引值：

// DataRow.svelte
<script>
    export let row;
</script>

<div class="table-row">
    <div class="table-cell">
        {row.id}
    </div>
    <div class="table-cell">
        {row.description}
    </div>
    <div class="table-cell">
        {row.date}
    </div>
    <div class="table-cell">
        <slot name="actions" id="{row.id}"></slot>
    </div>
</div>

// App.svelte
<script lang="ts">
    // import Table from "/src/components/DataTable/DataTable.svelte";
    import Row from "/src/components/DataTable/DataRow.svelte";

    let isChanged;

    // ...

    onMount(async () => {
        await loadTransactions();
        isChanged = new Array(transactions.length).fill(false);
    });


    function onClassChanged(i) {
        return function() {
            isChanged[i] = true;
            console.log('class changed');
        }
    }
</script>

<h1>Transactions</h1>
{#if transactions.length > 0}
<div class="datatable">
    {#each transactions as row, i}
    <Row {row}>
        <div slot="actions">
            <select on:change={onClassChanged(i)}>
                {#each classes as tx_class}
                    <option value="1">Class A</option>
                    <option value="2">Class B</option>
                {/each}
            </select>
            {#if isChanged[i]}
            <button>Save</button>
            {/if}
        </div>
    </Row>
    {/each}
</div>
{/if}

作为额外的好处，由于您现在定义了每行而不是整个表格的槽内容，如果需要，您也可以轻松处理不同的选择选项。

Basic REPL Demo 带有虚拟数据。

Answer 2

经过反复试验，我得到了如下工作：

<script lang="ts">
    import Table from "/src/components/DataTable/DataTable.svelte";
    import {onMount} from "svelte";

    export let transactions: Array<Type.Transaction.Bank.Record> = [];
    let classes: Array<Type.Transaction.Bank.Class> = [];
    let transactionService = new Transaction();


    async function loadTransactions() {
        let result = await transactionService.get();
        if (result) {
            transactions = result['transactions'];
        }
    }

    onMount(async () => {
        await loadTransactions();
    });


    function onClassChanged(row) {
        row.state = 1;
        rowsView = transactions;   
    }
</script>

<h1>Transactions</h1>
{#if transactions.length > 0}
    <Table 
        bind:rows={transactions}
        let:row={row}
        >
        <div slot="actions">
            <select on:change={() => {onClassChanged(row)}}>
                {#each classes as tx_class}
                    <option value="1">Class A</option>
                    <option value="2">Class B</option>
                {/each}
            </select>
            {#if selectedRow}
                {#if row.state === 1}
                    <button>Save</button>
                {/if}
            {/if}            
        </div>
    </Table>
{/if}

DataTable.svelte

<script lang="ts">
    export let rows: Array<[]>;
</script>

<div class="datatable">
    {#each rows as row}
        <div class="table-row">
            <div class="table-cell">
                {row.id}
            </div>
            <div class="table-cell">
                {row.description}
            </div>
            <div class="table-cell">
                {row.date}
            </div>
            <div class="table-cell">
                <slot name="actions" row="{row}"></slot>
            </div>
        </div>
    {/each}
</div>

这允许我将自定义操作传递给子 DataTable 组件并定位特定行（活动行）并隐藏或显示原始问题中描述的保存按钮。我将对每一行的引用传递回父插槽以执行操作，然后将该行作为参数传递给 onClassChanged 方法，在该方法中我可以切换该行的 state 属性 - 这将切换按钮的可见性。