面试题：Svelte插槽Slot与响应式数据结合应用

Question

在Svelte中，有一个父组件 `Parent.svelte`，包含一个普通插槽和一个数据变量 `message`。子组件 `Child.svelte` 通过插槽插入到父组件中，并且子组件有一个按钮，点击按钮时，父组件的 `message` 会更新，同时更新后的 `message` 要实时显示在子组件通过插槽渲染的内容区域中。请实现这个功能，并说明其中数据传递和响应式更新的原理。

Answer 1

实现步骤

1. 创建 Parent.svelte：

<script>
    let message = '初始消息';
    const updateMessage = () => {
        message = '更新后的消息';
    };
</script>

<div>
    <Child on:click={updateMessage}>
        <p>{message}</p>
    </Child>
</div>

2. 创建 Child.svelte：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('click')}>
    点击更新父组件消息
</button>

<slot></slot>

数据传递和响应式更新原理

1. 数据传递：
   • 父组件通过插槽将包含 message 的内容传递给子组件。在 Parent.svelte 中，<p>{message}</p> 被插入到 <Child> 的插槽中。
   • 子组件通过 dispatch 触发自定义事件 click，父组件监听这个事件并调用 updateMessage 函数来更新 message。
2. 响应式更新：
   • Svelte 使用一种基于赋值的响应式系统。当 message 在 updateMessage 函数中被重新赋值时，Svelte 会自动检测到这个变化。
   • 由于插槽内容依赖于 message，Svelte 会重新渲染插槽中的内容，从而实时显示更新后的 message。这种响应式更新是细粒度的，仅会更新依赖于变化数据的部分，而不是整个组件。