Svelte中如何向单个组件传递多个任意数量的action？

Svelte原生支持向单个组件传递任意数量的action，你之前的实现失效核心问题是用node.setAttribute(...)操作属性——Svelte的action是编译期处理的指令逻辑，不是DOM原生属性，运行时手动添加属性完全不会触发Svelte的绑定逻辑，自然无法生效。

最符合Svelte规范的方案是写一个轻量的合并action工具，统一托管所有传入action的生命周期，全程不需要操作DOM属性，支持任意数量action、action传参、参数响应更新、销毁时自动清理资源。

首先定义合并工具函数：

/**
 * 多action合并工具
 * @param {HTMLElement} node 指令绑定的DOM节点
 * @param {Array<Function|[Function, any]>} actions 待绑定的action列表，支持[action函数, 入参]格式
 * @returns {SvelteActionReturn}
 */
export function useActions(node, actions) {
  const actionInstances = []

  // 节点挂载时依次执行所有传入的action
  for (const item of actions) {
    if (Array.isArray(item)) {
      const [actionFn, params] = item
      actionInstances.push(actionFn(node, params))
    } else {
      actionInstances.push(item(node))
    }
  }

  return {
    // 入参更新时同步调用所有action的update生命周期
    update(latestActions) {
      for (let i = 0; i < latestActions.length; i++) {
        const item = latestActions[i]
        const instance = actionInstances[i]
        const [, params] = Array.isArray(item) ? item : [item, undefined]
        instance?.update?.(params)
      }
    },
    // 节点销毁时依次调用所有action的destroy生命周期做清理
    destroy() {
      for (const instance of actionInstances) {
        instance?.destroy?.()
      }
    }
  }
}

组件侧的用法和传单个action完全一致，没有额外学习成本：

• 子组件只需要声明一个接收action列表的prop，用use:useActions绑定到根节点即可

<!-- 子组件 CustomBlock.svelte -->
<script>
  import { useActions } from './utils.js'
  export let actions = []
</script>

<div use:useActions={actions} class="custom-block">
  <slot />
</div>

• 父组件调用时，把需要传入的任意数量action按格式组成数组传入即可，支持给单个action传参

<!-- 父组件调用示例 -->
<script>
  import CustomBlock from './CustomBlock.svelte'
  // 提前定义业务需要的action
  function tooltip(node, tipText) { /* 悬浮提示逻辑 */ }
  function draggable(node) { /* 节点拖拽逻辑 */ }
  function clickOutside(node, handler) { /* 点击外部监听逻辑 */ }
</script>

<CustomBlock
  actions={[
    tooltip,
    draggable,
    [clickOutside, () => console.log('点击了组件外部')]
  ]}
/>

Svelte的action本质就是普通函数：接收绑定的DOM节点和可选入参，可选返回带update（参数更新时触发）、destroy（节点销毁时触发）方法的生命周期对象。合并多个action的逻辑没有任何黑魔法，只是在节点的对应生命周期节点，依次触发所有传入action的对应逻辑，完全符合Svelte的官方设计规范。

• use:是Svelte特有的编译期指令，最终会被编译成原生的函数调用代码，不存在对应的真实DOM属性，运行时手动给节点加use:xxx格式的属性不会被Svelte识别处理
• 手动操作属性的方式完全绕过了Svelte的生命周期管理，就算强行手动调用action函数，也无法响应后续的参数更新，组件销毁时也不会自动触发事件解绑、内存清理等逻辑，很容易引发隐性bug

如果场景中只需要传递固定个数的action，不需要支持动态任意数量，可以直接在组件内声明对应prop，逐个绑定use:指令即可，不需要额外工具：

<script>
  export let primaryAction
  export let secondaryAction
</script>

<button use:primaryAction use:secondaryAction>
  <slot />
</button>

这种写法的缺点是灵活性差，不支持动态增减传入的action数量，只适合简单场景。

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