Svelte组件中如何避免手动逐层传递props？

你可以通过以下几种方式避免逐层手动传递onChange prop：

1. 利用Svelte的事件自动转发特性 #

Svelte会自动转发组件内部DOM元素的原生事件，无需在子组件里定义onChange prop，直接让事件向上冒泡即可。

修改A.svelte，移除onChange相关代码：

<!-- A.svelte -->
<script>
    export let value;
</script>

<input
    type="number"
    bind:value
/>

在B.svelte中直接监听A组件的change事件，无需传递onChange prop：

<!-- B.svelte -->
<script>
    export let onChange = () => {};
</script>

<p>Enter your age</p>
<A
    bind:value
    on:change={(e) => onChange(e.target.value || '')}
/>

如果B组件本身不需要处理这个事件，甚至可以直接让事件继续向上转发，不用定义onChange：

<!-- B.svelte -->
<p>Enter your age</p>
<A bind:value />

此时使用B的父组件可以直接监听B的change事件：

<B on:change={(e) => handleAgeChange(e.target.value || '')} />

2. 使用上下文（Context）传递回调 #

如果组件层级较深，事件转发不够方便，可以用Svelte的上下文机制传递回调函数，跳过中间组件的手动传递。

在顶层组件（比如App.svelte）中设置上下文：

<!-- App.svelte -->
<script>
    import { setContext } from 'svelte';
    import B from './B.svelte';

    function handleAgeChange(value) {
        // 处理年龄变更逻辑
        console.log('年龄变为:', value);
    }

    setContext('ageOnChange', handleAgeChange);
</script>

<B />

修改A.svelte，直接从上下文获取回调：

<!-- A.svelte -->
<script>
    import { getContext } from 'svelte';
    export let value;
    const onChange = getContext('ageOnChange') || (() => {});
</script>

<input
    type="number"
    bind:value
    on:change={() => onChange(value || '')}
/>

B.svelte无需再处理onChange prop：

<!-- B.svelte -->
<p>Enter your age</p>
<A bind:value />

3. 派发自定义事件 #

在A组件中创建自定义事件，将变更值作为事件数据派发，中间组件可以监听并处理或继续转发。

修改A.svelte：

<!-- A.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';
    export let value;
    const dispatch = createEventDispatcher();
</script>

<input
    type="number"
    bind:value
    on:change={() => dispatch('ageChange', value || '')}
/>

B.svelte监听自定义事件并调用自身的onChange：

<!-- B.svelte -->
<script>
    export let onChange = () => {};
</script>

<p>Enter your age</p>
<A
    bind:value
    on:ageChange={(e) => onChange(e.detail)}
/>

内容的提问来源于stack exchange，提问作者Josip Domazet