Блог

У меня есть nested компонент, который я создам несколько копий в приложении:

 //App.svelte
<Nested /> // Nested-1 
<Nested /> // Nested-2
<Nested /> // Nested-3
 

у Nested меня есть экспорт функции:

 //Nested.svelte
export function doExample(){...}
 

Каков наилучший способ для меня позвонить doExample() Nested-2 ? Один из способов, о котором я могу думать, — использовать id в Nested :

 //App.svelte
<Nested id="nested_1" /> // Nested-1 
<Nested id="nested_2" /> // Nested-2
<Nested id="nested_3" /> // Nested-3
 

затем используйте getElementById() для идентификации конкретного компонента, а затем вызовите функцию. Но есть ли лучший способ добиться этого?

Вы могли бы сделать это, используя bind в экземпляре, а затем вызвать функцию в этом экземпляре

 <script>
  import Nested from './Nested.svelte'
  let child
  
  const action = () => child.doExample()
</script>

<Nested bind:this={child} />
 

Обратите внимание, что это также будет работать с массивом:

 <script>
  import Nested from './Nested.svelte'
  let children = []
  
  const action = i => children[i].doExample()
</script>

{#each array as item, i}
  <Nested bind:this={children[i]} />
{/each}