时间戳

首页 > 解决方案 > Svelte：如何通知子组件或兄弟组件

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

问题描述

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

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

我希望当用户点击里面的按钮时<child1>，里面会执行一些函数<child2>。我可以放入什么(1)来(2)实现这种行为？

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

标签： javascriptsvelte

解决方案

绑定函数：

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

推荐阅读