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

【问题标题】：Svelte: how to notify a child or sibling componentSvelte：如何通知子组件或兄弟组件
【发布时间】：2023-03-19 21:47:01
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript svelte

【解决方案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 在父子组件之间共享一个函数一样；

【讨论】：

太棒了，我不知道如果我绑定一个组件，我可以直接访问它的所有导出成员。
在实现它之后，我发现如果组件层次结构很复杂（就像我的情况），那么您最终会向上传递事件并在所有层次结构中向下调用。我认为类似 Redux 的技术是避免这种复杂性的解决方案，对吗？
我从未使用过 redux。但是您可以使用响应式 Svelte 存储来传递数据，而不会产生层次结构的麻烦。