Svelte:如何通知子组件或兄弟组件

Question

我知道当某些属性发生变化时，svelte非常适合自动更新组件。但我的情况略有不同。为简化起见，假设我有一个父组件和两个子组件:

<div>
<child1 onButtonClicked={handleClick} />
<child2 (1) />
</div>
<script>
function handleClick() {
(2)
}
</script>

我希望当用户点击<child1>中的一个按钮时，在<child2>中执行一些函数。我可以在(1)和(2)中加入什么来实现这个行为?

我所能想到的就是有一个计数器，在handleClick内增加它，并将计数器传递给<child2>，然后在<child2>中使用$:来捕捉变化。但这将是一个非常做作的变通办法。当然，我可以将我想要执行的代码从<child2>移动到父组件，但这是一个更难看的解决方案，因为<child2>才是真正知道该做什么的人。

Answer 1

绑定函数:

Child2.app

<script>
.....
export const someFunc = () => console.log('someFunc');
</script>
....

你的代码更新:

<script>
import Child1 ... 
import Child2 ...
let child2;
function handleClick() {
child2.someFunc();
}
</script>
<div>
<Child1 onButtonClicked={handleClick} />
<Child2 bind:this={child2} />
</div>

或:

<script>
import Child1 ... 
import Child2 ...
let child2;
</script>
<div>
<Child1 onButtonClicked={child2.someFunc} />
<Child2 bind:this={child2} />
</div>

Repl: Bind函数从同级组件

调用此函数还有其他方法可以在组件之间共享函数。比如在父组件和子组件之间共享一个函数，使用setContext和getContext;