在 svelte 3 中向 50 多个嵌套组件发出信号以执行子组件功能的最佳方式是什么

Question

示例 table 中有行（子组件）。我需要在每一行中进行文本搜索并用结果标记这些行。

我从 svelte 开始，它看起来非常非常有趣。如何向所有 svelte 子组件（行）发送信号以执行行搜索。

我可以切换商店，但一定有更好的基本方法吗？

Child.svelte:

<script>
    export let child;   // child id
    import {signal} from './store.js';
    let fired = false

    $: if ($signal) {
        fired = true;
        setTimeout(() => fired = false, 500);
    }
</script>

{#if fired} 
  <p>Child-{child}: fired</p>
{/if}

更新这好多了：
Child.svelte:

<script>
    import { onDestroy } from 'svelte';
    import {search} from './store.js';
    export let child;   
    let result = '';

    // observe the search term
    const unsubscribe = search.subscribe(value => {
      result = `Child-${child} searched : ${value}`;
    });
    onDestroy(unsubscribe);
</script>

{#if $search} 
  <p>{result}</p>
{/if

App.svelte:

<script>
  import {search} from './store.js';
  import Child from './Child.svelte';
</script>

<!-- <input bind:value={$search}> -->
<input on:change={e => {search.set(e.target.value)}}>

<div>
  <h3>{$search}</h3>
  <Child child={'A'} />
  <Child child={'B'} />
</div>

Answer 1

但是不需要商店也可以做到。通过搜索作为道具。使嵌套组件中的搜索函数调用具有反应性。现在 Svelte 将负责搜索更改。

Search.svelte:

<script>
  import Row from './Row.svelte';
  let data = {
    'A': 'Dit is een stuk tekst uit een veel grotere tekst', 
    'B': 'En hier nog een stuk tekst'
   };

   let search = '';
   function searchHandler(e) {
     search = e.target.value;  
   }
</script>

<style>
  table, th {
    border-collapse: collapse;
    border: 1px solid black;
  } 
</style>

<h3>Search column <input on:blur={searchHandler}></h3>

<table>
  <tr>
    <th>Row</th>
    <th>Found</th>
    <th>Text</th>
  </tr>      
  <Row rowId={'A'} text={data.A} {search}/>
  <Row rowId={'B'} text={data.B} {search}/>
</table>

Row.svelte:

<script>
  export let rowId; 
  export let text;
  export let search = '';

  let result = text;
  let found = false;

  function searchNow(s) {
    let re = new RegExp(s, 'gi');
    result = text.replace(re, `<mark>${s}</mark>`);
    found = s !== '' && text !== result;
  }

  $: searchNow(search)    // make it reactive

</script>

<style>
  td {
    border: 1px solid black;
  }
</style>

<tr>
  <td>{rowId}</td>
  <td>{found}</td>
  <td>{@html result}</td>
</tr>

您可以使用带标签的块语句代替 $: searchNow(search)：

  $: {    // make it reactive block
    console.log('searchNow', search);
    searchNow(search)
  }

在 svelte 3 中向 50 多个嵌套组件发出信号以执行子组件功能的最佳方式是什么

What is the best way to signal 50+ nested components to execute a child component function in svelte 3

svelte