svelte-3 - Svelte3中道具发生变化时如何运行特定方法？

Question

我正在构建一个自动完成文本字段组件。我们将显示根据用户类型过滤的项目的弹出窗口。它将是异步的，我将从服务器获取详细信息并根据字段中键入的文本进行一些过滤。

所以在这里，每当我向组件发送新数据时，我都会运行这个过滤逻辑。

我来自 Angular，我们曾经有 ngOnChange()。svelte3 中是否有类似的东西可用。

现在，我通过绑定 bind:this 从外部调用该方法进行过滤。我不觉得这是一个正确的方法。

score 1 · Accepted Answer

Svelte 有商店。store 是一个可观察的对象，可以在任何地方观察到，甚至超出你使用 RxJS 的项目。
例子：

const unsubscribe = search.subscribe(s) => {
  doSomeThing(s);
}); 
onDestroy(unsubscribe);

在另一个组件中，您可以使用 search.set('Hi');

但期待其他解决方案来处理父 <-> 子组件中的此类更改或调用子组件方法。

从孩子到父母，我们可以触发事件。
但是从父母到孩子……？我们可以使用 store 或 Component bind:this 或 ..? 但 ....

更新：我刚刚发现这也很好用：

仅使用道具的子组件。无需商店：

export let search = '';
....
$: if (search !== '') {       // make it react to changes (in the parent)
     doSomeThing(search);
   };

1 回答 1