Svelte - 从#each 块中提取值并传入函数答案

【问题标题】：Svelte - Extract value from #each block and pass in functionSvelte - 从#each 块中提取值并传入函数
【发布时间】：2021-04-06 04:45:38
【问题描述】：

使用 svelte，我喜欢在 #each 块内按下按钮时捕获一个值（例如汽车价格），以便将其传递给另一个组件。

代码示例：

<script>
  import TeslaStore from "../stores/TeslaStore.js";

  const cars = $TeslaStore.filter((e) => e.name === "Model S");
</script>

{#each cars as car}<button>{car.label} {car.price}</button>{/each}

我知道，对于简单的提取，您可以使用 on:click 回调函数，例如：

on:click(() => price = car.price)

但这对我没有帮助，因为我实际上需要调用并运行一个可以传递该值的函数。

欢迎提出任何建议！

【问题讨论】：

标签： svelte svelte-component

【解决方案1】：

这是一个示例，说明如何使用新选择的价格在每个块中调用函数。

<script>
    let selectedPrice;
    const cars = [
        {
            name: 'car 1',
            price: '2000'
        },
        {
            name: 'car 2',
            price: '4000'
        }
    ]
    
    function handlePriceSelection(newPrice) {
        selectedPrice = newPrice;
        // do whatever else you need to with the new price
    }
</script>

{#each cars as car}
    <button on:click={() => handlePriceSelection(car.price)}>
        {car.name} (${car.price})   
    </button>
{/each}

<div>
    Selected price: {selectedPrice}
</div>

【讨论】：

【解决方案2】：

我喜欢使用高阶函数来完成这类事情：

<script>
  import TeslaStore from "../stores/TeslaStore.js";

  const cars = $TeslaStore.filter((e) => e.name === "Model S");

  // This creates a function for a specific car.
  const selectsCar = (car) => { /* ... do something with car.price ... */ }
</script>

{#each cars as car}
  <button on:click={selectsCar(car)}>{car.label} {car.price}</button>
{/each}

我实际上需要调用并运行一个可以传递该值的函数。

根据您要完成的工作（如果我不同意此建议，请道歉），您可以使用从 svelte 导出的 createEventDispatcher 将这个值从组件中“取出”。

// Reworked from previous example:
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const selectsCar = (car) => dispatch('select-car', car);

【讨论】：