子组件上的 Svelte 执行功能答案

【问题标题】：Svelte executing function on child component子组件上的 Svelte 执行功能
【发布时间】：2020-09-07 16:12:43
【问题描述】：

我是 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 中 createEventDispatcher 并在 child 中执行函数。请告诉我。谢谢。

【问题讨论】：

标签： svelte

【解决方案1】：

让它反应：

<script>
    export let dataMap;

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

    $: executeChildFunction(dataMap);
</script>

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

【讨论】：

完美运行。它是一种使函数具有反应性的好技术。非常感谢。