在 svelte 3 中向 50 多个嵌套组件发出信号以执行子组件功能的最佳方法是什么 [英] What is the best way to signal 50+ nested components to execute a child component function in svelte 3

问题描述

示例在带有行(子组件)的表中.我需要在每一行中进行文本搜索并用结果标记行.

我从 svelte 开始，它看起来非常有趣.如何通知所有细长的子组件(行)执行行搜索.

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

Child.svelte:

{#如果被解雇}<p>Child-{child}:被解雇了</p>{/如果}

更新这好多了:
Child.svelte:

{#if $search}<p>{结果}</p>{/如果

App.svelte:

<!-- --><input on:change={e =>{search.set(e.target.value)}}><div><h3>{$search}</h3><Child child={'A'}/><Child child={'B'}/>

解决方案

但无需商店即可完成.将搜索作为道具传递.在嵌套组件中使搜索函数调用具有反应性.现在 Svelte 将负责搜索更改.

Search.svelte:

<风格>表，第 {边框折叠:折叠；边框:1px纯黑色；}</风格><h3>搜索栏<input on:blur={searchHandler}></h3><表格><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}/>

Row.svelte:

<风格>TD{边框:1px纯黑色；}</风格><tr><td>{rowId}</td><td>{发现}</td><td>{@html 结果}</td></tr>

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

 $: {//使其成为反应块console.log('searchNow', search);立即搜索(搜索)}

Example In a table with rows (child components). I need To do a text search in every row and mark the rows with results.

I'am starting with svelte and it looks very very interesting. How to signal all svelte child components (rows) to execute the row search.

I can toggle a store, but there must be a fundemental better way?

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}

UPDATE This is a lot better:
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>

解决方案

But is can be done without the need of a store. Pass search as a prop. Make the search function call reactive in the nested component. Now Svelte will take care of search changes.

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>

Instead of $: searchNow(search) you can use a labeled block statement:

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

这篇关于在 svelte 3 中向 50 多个嵌套组件发出信号以执行子组件功能的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！