svelte - 从一系列嵌套组件中的特定组件调用函数

Question

我有一个 nested 组件，我将在应用程序中实例化多个副本：

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

在 Nested 我导出了一个函数：

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

我在 Nested-2 中调用 doExample() 的最佳方式是什么？我能想到的一种方法是在 Nested:

处使用 id

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

然后使用getElementById()来识别特定的组件然后调用函数。但是有没有更好的方法来实现这一点？

Answer 1

您可以通过在实例上使用 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}

svelte - 从一系列嵌套组件中的特定组件调用函数

svelte - call function from specific component in a series of nested components

javascript

svelte-component

svelte-3