Svelte两个子组件间数据传递的正确方法及联动禁用实现

完全可以不使用Store实现该需求，最优方案是将两个子组件的共享关联状态提升到公共父组件App.svelte管理，通过Svelte原生的双向绑定和props传值实现组件联动，全程不会打乱现有数据流。

具体修改步骤 #

1. 改造App.svelte

新增两个子组件的选中状态绑定，以及联动禁用规则的计算逻辑：

<script>
    import Carmaterial from "./Carmaterial.svelte";
    import Carcolor from "./Carcolor.svelte";

    const carMaterial = {
        title: 'Please select car material',
        property: 'carMaterial',
        options: [
            {id: 0, name: 'Gold'},
            {id: 1, name: 'Titanium'},
            {id: 2, name: 'Silver'}
        ],
    };

    const carColor = {
        title: 'Please select car color',
        property: 'carColor',
        options: [
            {id: 0, name: 'Black'},
            {id: 1, name: 'Blue'},
            {id: 2, name: 'Orange'},
            {id: 3, name: 'White'},
            {id: 4, name: 'Yellow'},
            {id: 5, name: 'Green'},
        ],
    };
    
    // 绑定两个子组件的选中值
    let selectedMaterial = carMaterial.options[1];
    let selectedColor = carColor.options[2];
    
    // 选中钛合金时需要禁用的颜色id列表
    $: disabledColorIds = selectedMaterial.id === 1 ? [2, 3] : [];
</script>

<!-- 新增双向绑定选中值，给颜色组件传禁用列表 -->
<Carmaterial {...carMaterial} bind:selected={selectedMaterial} />
<Carcolor {...carColor} bind:selected={selectedColor} {disabledColorIds} />

<style>

</style>

2. 改造Carcolor.svelte

新增禁用列表props，给单选框加上禁用判断逻辑：

<script>
export let property;
export let title;
export let options;
export let selected = options[2];
// 接收父组件传的禁用颜色id列表
export let disabledColorIds = [];

// 可选补充：如果当前选中的颜色被禁用，自动切换到第一个可用选项
$: if (disabledColorIds.includes(selected.id)) {
    selected = options.find(opt => !disabledColorIds.includes(opt.id)) || options[0];
}
</script>
<h3>{title}</h3>
<ul>
{#each options as option (option.id)}
    <li>
        <label>
            <input 
                value={option.id} 
                bind:group={selected.id} 
                type="radio" 
                name={property}
                <!-- 判断当前选项是否需要禁用 -->
                disabled={disabledColorIds.includes(option.id)}
            >
            {option.name}
            <!-- 可选：给禁用选项加提示 -->
            {#if disabledColorIds.includes(option.id)} (不可选) {/if}
        </label>
    </li>
{/each}
</ul>

<style lang="scss">
/* 可选：给禁用选项加灰色样式 */
input:disabled + span {
    color: #999;
}
</style>

方案说明 #

• 全程没有引入额外的状态管理工具，仅利用Svelte原生的响应式语法和双向绑定能力
• 原有组件的props结构、默认选中逻辑完全保留，没有打乱现有数据流
• 关联逻辑统一放在父组件维护，后续如果要新增其他材质和颜色的联动规则，直接修改父组件的disabledColorIds计算逻辑即可，扩展性更强

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