子组件上的 Svelte 执行函数

Question

我是 svelte 的新手，我想知道是否有办法将数据从父组件传递到嵌套的子组件并在子组件上执行功能。

下面是 App.svelte 的代码

<script>
  import Outer from "./Outer.svelte";
  let dataMap = {};
  function handleIncommingMessage(message) {
    dataMap[message.key] = message;
  }
</script>
<Outer {dataMap} />

这是外部组件Outer.svelte

<script>
    import Inner from './Inner.svelte';
    export let dataMap;
</script>

<Inner {dataMap}/>

这是内部组件 Inner.svelte

<script>
    export let dataMap;
    function executeChildFunction() {
        //Process received dataMap
    }
</script>

<div>
<!-- Display processed dataMap -->
</div>

我想在 Inner.svelte 中运行 executeChildFunction。我知道在 Inner.svelte 中创建 EventDispatcher 并在 App.svelte 中执行一个函数。但我想知道另一种方法是否可行，在 Parent 中创建 EventDispatcher 并在 child 中执行函数。请告诉我。谢谢。

Answer 1

使其具有反应性:

<script>
    export let dataMap;

    function executeChildFunction(dataMap) {
        //Process received dataMap
    }

    $: executeChildFunction(dataMap);
</script>

<div>
    <!-- Display processed dataMap -->
</div>