面试题：Svelte Props单向数据流的复杂应用

假设你正在开发一个多层嵌套的Svelte应用，顶层父组件通过Props向底层子组件传递数据。由于业务需求，底层子组件需要根据接收到的Props触发顶层父组件的某个函数来更新数据。在遵循Props单向数据流的原则下，你会如何设计这个交互逻辑？请详细描述实现步骤，并说明关键代码片段。

38.5万热度

难度

前端开发Svelte

设计思路：
- 在Svelte中，虽然Props是单向数据流，但可以通过自定义事件来实现子组件向父组件传递信息。父组件可以将一个函数作为Prop传递给子组件，子组件在需要时触发这个函数，从而实现更新数据的目的。
实现步骤：
- 顶层父组件：
  - 定义一个数据变量和一个更新数据的函数。
  - 将更新数据的函数作为Prop传递给子组件。
- 底层子组件：
  - 接收父组件传递的函数作为Prop。
  - 在需要触发更新的地方调用这个函数。
关键代码片段：
- 顶层父组件（例如Parent.svelte）：

<script>
    let data = '初始数据';
    function updateData(newData) {
        data = newData;
    }
</script>
<Child {updateData} />
<p>{data}</p>

底层子组件（例如Child.svelte）：

<script>
    export let updateData;
    function triggerUpdate() {
        const newData = '新的数据';
        updateData(newData);
    }
</script>
<button on:click={triggerUpdate}>更新数据</button>

面试题：Svelte Props单向数据流的复杂应用

知识考点

面试题答案