在子组件上执行 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 中 createEventDispatcher 并在 App.svelte 中执行函数。但我想知道另一种方式是否可行，在父级中创建EventDispatcher并在子级中执行函数。请告诉我。谢谢。

Answer 1

使其具有反应性：

<script>
    export let dataMap;

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

    $: executeChildFunction(dataMap);
</script>

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