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

Question

我知道 svelte 非常适合在某些属性发生变化时自动更新组件。但我的情况略有不同。为了简化，假设我有一个带有两个子组件的父 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>

回复：Bind function to call this function from sibling component

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

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

Svelte: how to notify a child or sibling component

javascript

svelte