svelte - 从一系列嵌套组件中的特定组件调用函数
svelte - call function from specific component in a series of nested components
我有一个 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()
来识别特定的组件然后调用函数。但是有没有更好的方法来实现这一点?
您可以通过在实例上使用 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}
我有一个 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()
来识别特定的组件然后调用函数。但是有没有更好的方法来实现这一点?
您可以通过在实例上使用 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}