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

Question

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

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

我希望当用户单击内部按钮时<child1>，内部会执行某些功能<child2>。我可以放入什么(1)来(2)实现这种行为？

我能想到的就是有一个计数器，在内部递增它handleClick并将计数器传递给<child2>，然后使用$:in<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：绑定函数以从同级组件调用此函数

还有其他方法可以在组件之间共享功能。就像使用 setContext 和 getContext 在父组件和子组件之间共享函数一样；