面试题：Svelte事件派发与Props结合处理复杂业务场景

Question

假设在一个电商购物车场景中，商品列表组件作为子组件，购物车总览组件作为父组件。商品列表中的每个商品都有添加到购物车按钮，点击按钮后要更新购物车总览中的商品数量和总价。请详细阐述如何运用Svelte的事件派发与Props结合来实现该功能，并给出核心代码逻辑。

Answer 1

1. 事件派发与Props结合原理阐述：
   • 在Svelte中，子组件（商品列表组件）可以通过 createEventDispatcher 创建一个事件分发器，用于向父组件（购物车总览组件）派发事件。
   • 父组件通过 props 将函数传递给子组件，子组件在特定操作（如点击添加到购物车按钮）时调用该函数，并传递相关数据（如商品价格、数量等），父组件接收到数据后更新自身状态（购物车商品数量和总价）。
2. 核心代码逻辑：
   • 商品列表组件（子组件）：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    const product = {
        id: 1,
        price: 10,
        quantity: 1
    };
    const addToCart = () => {
        dispatch('addToCart', product);
    };
</script>

<button on:click={addToCart}>添加到购物车</button>

• 购物车总览组件（父组件）：

<script>
    let totalPrice = 0;
    let totalQuantity = 0;
    const handleAddToCart = (product) => {
        totalPrice += product.price * product.quantity;
        totalQuantity += product.quantity;
    };
</script>

<商品列表组件 bind:this={productList} on:addToCart={handleAddToCart} />

<p>购物车商品数量: {totalQuantity}</p>
<p>购物车总价: {totalPrice}</p>

以上代码展示了如何在Svelte中通过事件派发和Props结合，在电商购物车场景下实现商品添加到购物车时更新购物车总览的商品数量和总价。