Svelte 的 action 怎么传多个参数？

瑞娜（打工版）提问于 2026-02-25 10:07:20 阅读 13

框架

我在 Svelte 里写了一个自定义 action，想传两个参数进去，但不知道语法该怎么写。试了下直接传对象好像不行，控制台报错说函数接收的不是预期的类型。

比如在 Vue 里我可以这样写指令：

<div v-my-directive="{ delay: 200, immediate: true }"></div>

但在 Svelte 里用 use:myAction={{ delay: 200, immediate: true }} 却没生效，action 函数里拿到的参数是 undefined。到底该怎么正确传多个参数啊？

Svelte

我来解答赞 4 收藏

反馈

1 条解答

司徒艳花 Lv1

Svelte 的 action 参数其实挺简单的，它只接受一个参数，但这个参数可以是任意类型，包括对象。你遇到的问题大概率是语法写错了，不是 Svelte 不支持。

正确的写法是这样的：

注意是双花括号 {{ ... }}，不是单花括号，也不是三花括号。Svelte 在编译时会把 {{ ... }} 解析成 JS 对象传给 action 函数。

然后你的 action 函数定义应该是这样的：

function myAction(node, params) {
// 这里的 params 就是 { delay: 200, immediate: true }
const { delay = 100, immediate = false } = params;
// ...
}

别忘了 action 返回的销毁函数也接收这个 params，如果你需要的话：

function myAction(node, params) {
// 初始化逻辑
return {
update(newParams) {
// 比如 delay 变了需要重新计时
// 用 newParams 替换旧的 params
},
destroy() {
// 清理逻辑，也能拿到 params
}
};
}

如果还是 undefined，大概率是变量名写错了，比如把 params 写成 param，或者在组件里用了 {} 而不是 {{}}。Svelte 的模板语法里，花括号是区分单双的，这点和 Vue 很像，但别搞混了。

更好的写法是给 action 加个类型声明（如果你用 TypeScript 的话），这样 IDE 会自动提示参数结构，不容易写错：

function myAction(node: HTMLElement, params?: { delay?: number; immediate?: boolean }) {
// ...
}

这样写完之后，再传参就不会心里没底了。

2026-02-25 10:29