在 svelte 中的 2 个子组件之间传递数据的正确方法是什么

Question

我在两个子组件之间传递数据的正确方法是什么？我有一个非常简单的结构：

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'},
            ],
        };
            
    </script>
    
    //here im passing all of the data to the components itself

    <Carmaterial {...carMaterial} />
    <Carcolor {...carColor}/>
    
    
    <style>
    
    </style>

组件基本上是2组无线电输入：

Carmaterial.svelte

<script>

export let property;
export let title;
export let options;

//im using this in order to predefine value
export let selected = options[1];

</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}>
            {option.name}
        </label>
        
    </li>

{/each}
</ul>

<style lang="scss">

</style>

Carcolor.svelte

<script>
export let property;
export let title;
export let options;

//im using this in order to predefine value
export let selected = options[2];

</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}>
            {option.name}
        </label>
        
    </li>

{/each}
</ul>
<style lang="scss"></style>

最后我的输出看起来像

h3 with Title
ul li with material options
h3 with Title
ul li with color options

What im trying to achieve is -> I need somehow to disable "Orange" and "White" radio buttons (from carColor group) when "Titanium" material (from carMaterial group) is selected.

这可以不使用商店吗？如果是的话，最好的解决方案是什么，以防我不想弄乱我的数据流..

Answer 1

基本上有两种方式：

使用存储，这将为组件提供 'shared' 获取数据的地方
将数据移动到父组件并将其传递给子组件：

<script>
 let selectedMaterial = 'paper';
 let selectedColor = 'orange';
</script>

<Carmaterial {...carMaterial} {selectedColor} bind:selectedMaterial />
<Carcolor {...carColor} {selectedMaterial} bind:selectedColor />

请注意，我不会使用 selected，而是在相应的组件中使用 selectedMaterial 和 selectedColor，只是为了使其更短。

虽然基本原理很容易理解：将 1 个组件的选择绑定到父组件，然后将此选择传递给另一个组件。

您已经将可能的数据保留在父级中，这似乎是很自然的事情。

在 svelte 中的 2 个子组件之间传递数据的正确方法是什么

What is the right way for passing data between 2 child components in svelte

svelte

svelte-3

svelte-component