我是否正确地将范围输入拆分为单独的 Svelte 组件？有没有更好的办法？

Question

我是 Svelte 的新手并且很喜欢它！使用一些 UI 和共享状态制作一个单组件应用程序非常有趣和简单（具有 HTML、CSS、& JS 的中级知识和初学者知识反应）。

然而，最终，我希望制作更复杂的应用程序，这些应用程序将涉及大量输入和状态，因此显然，我需要了解如何在组件之间使用状态。

但是，我对制作自定义输入组件和在其他地方最好地使用状态的最佳方式感到有些困惑。具体来说，我希望创建一个自定义样式的 input type="range" 组件并在父组件中使用它。

在写这个问题的过程中，我确实找到了一种似乎可行的方法，但我在文档或谷歌搜索中找不到与这种情况完全匹配的东西，所以我不确定我的解决方案.这是我想出的：https://github.com/arrowtype/svelte-slider/。

我的解决方案总结

我从 SvelteJS 模板 (https://github.com/sveltejs/template) 开始。

我的App.svelte是这样的：

<script>
    import SimpleSlider from './SimpleSlider.svelte'

    export let sliderValA = 0;
    export let sliderValB = 15;
</script>

<main>
    <h1>A simple SvelteJS slider component</h1>

    <p>Slider A value is {sliderValA}</p>
    <SimpleSlider bind:value={sliderValA} min="0" max="10" step="1"/>

    <p>Slider B value is {sliderValB}</p>
    <SimpleSlider bind:value={sliderValB} min="0" max="30" step="5"/>

    <p>A + B is {sliderValA + sliderValB}</p>
</main>

而SimpleSlider.svelte是这样的：

<script>
    export let value = 5;
    export let min = 0;
    export let max = 10;
    export let step = 1;
</script>

<div class="slider-container">
    <input type="range" bind:value={value} min={min} max={max} step={step}>
    <span>{value}</span>
</div>

<style>
    .slider-container {
        display: flex;
        align-items: center;
    }
    input {
        margin:0 0.5em 0 0;
    }
</style>

在我的测试中，这似乎有效。但是，我发现到达那里具有挑战性，而且我不确定这是否是最佳做法。

我是否应该做更多的事情，比如使用 svelte/store 模块来处理全局状态（如果不需要，我什么时候开始需要它）？

Answer 1

老实说，这看起来真的很不错，而且似乎适合我。为什么要使用全球商店？使用它意味着数据随处可用并保存在您的应用程序中，这听起来有点矫枉过正，当只需要一种小形式的组件时。这样做对小型独立组件更好。

你的SimpleSlider.svelte只有一点改进我能想到的:

<script>
  export let moreProps = {}
</script>

<div class="slider-container">
    <input type="range" bind:value {min} {max} {step} {...moreProps}>
    <span>{value}</span>
</div>

这种方法利用了 sveltes shorthand 语法并减少了代码量。 moreProps 如果您决定传递其他属性，例如 disable，例如：

<SimpleSlider bind:value={sliderValA} min="0" max="10" step="1" moreProps={{disabled:true}}/>

我是否正确地将范围输入拆分为单独的 Svelte 组件？有没有更好的办法？

Am I correctly splitting a range input into a separate Svelte component? Is there a better way?

javascript

svelte

svelte-component

我的解决方案总结