Svelte：如何在复用按钮组件中灵活控制默认行为

你的Button组件硬编码了on:click|preventDefault，导致所有按钮点击都会阻止默认行为——包括type="submit"的按钮，这就是表单无法提交的核心原因。要兼顾两种场景（既保留阻止默认行为的能力，又支持submit按钮正常提交），可以给组件添加可配置选项：

修改Button.svelte组件 #

新增一个preventDefault导出属性，默认值设为true（适配大多数需要阻止默认行为的场景），然后在点击事件处理函数中根据该属性决定是否阻止默认行为：

<script lang="ts">
    let className = ''
    export { className as class }
    export let type: any = 'button'
    // 新增可配置属性，默认阻止默认行为
    export let preventDefault = true

    function handleClick(e: MouseEvent) {
        if (preventDefault) {
            e.preventDefault()
        }
    }
</script>

<button
    class="text-white hover:bg-blue-600 {className}"
    on:click={handleClick}
    on:focus
    on:submit
    type="{type}">
    <slot />
</button>

在Contact.svelte中使用 #

当需要submit按钮正常触发表单提交时，传递preventDefault={false}即可：

import Button from '../../../lib/button.svelte'

<form>
<input type="text" name="email" />
<Button type="submit" class="mt-2" preventDefault={false}>Save</Button>
</form>

这种方式既保留了组件在普通场景下阻止默认行为的能力，又能让submit按钮正常触发表单提交。如果后续有submit按钮需要阻止默认行为（比如表单预验证），只需不传该属性或显式设为true即可。

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