面试题：Svelte中动态Props的常见应用场景及实现方式

Question

请阐述Svelte中动态Props在哪些场景下会被频繁使用，比如组件复用、数据驱动视图更新等场景，并举例说明如何在Svelte组件中实现动态Props的传递与接收。

Answer 1

动态Props频繁使用场景

1. 组件复用：当一个组件需要在不同地方展示不同的数据，但结构和逻辑相似时。例如，一个卡片组件，在首页展示热门文章，在分类页面展示特定分类文章。复用该卡片组件，通过动态Props传递不同文章数据。
2. 数据驱动视图更新：当数据发生变化，需要视图随之更新时。如一个计数器组件，通过传递动态Props来更新显示的计数数值。
3. 条件渲染：根据不同条件展示不同内容。比如根据用户权限，传递不同的动态Props决定是否展示某个按钮。

动态Props传递与接收示例

1. 父组件传递Props 假设我们有一个 Child.svelte 组件，需要接收一个动态的标题 title 和内容 content。 在父组件 Parent.svelte 中：

<script>
    let title = '初始标题';
    let content = '初始内容';

    function updateData() {
        title = '新标题';
        content = '新内容';
    }
</script>

<Child {title} {content} />
<button on:click={updateData}>更新数据</button>

2. 子组件接收Props 在 Child.svelte 组件中：

<script>
    export let title;
    export let content;
</script>

<h1>{title}</h1>
<p>{content}</p>

在上述示例中，父组件通过 {title} 和 {content} 语法将数据传递给子组件，子组件通过 export let 来接收这些动态Props。当父组件中的数据变化时，子组件会自动更新视图。