关于 svelte-template-directives
面向 Svelte 开发者的模板指令参考技能，重点介绍 Svelte 5 的 attachments 及其与旧式 actions 的差异，适用于实现响应式 DOM 行为和查阅指令用法。
主要功能
- 01Svelte 指令速查
- 02响应式 @attach 用法模式
- 03与 use: actions 的对比
- 04旧式 action 转换指南
- 05each 块键值使用提示
适用场景
- 01添加响应式 DOM 行为
- 02集成第三方 DOM 库
- 03将旧式 actions 转换为 attachments
- 04核对 Svelte 模板指令用法
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/svelte-template-directives确认已加载。
附带文件references/attach-patterns.mdreferences/other-directives.md
详细介绍
Svelte 模板指令
@attach（Svelte 5.29+）
use: action 的响应式替代方案。 依赖项变化时会重新运行，可通过展开传递组件，并支持清理函数。
<script>
import ImageZoom from 'js-image-zoom';
function useZoom(options) {
return (element) => {
new ImageZoom(element, options);
return () => console.log('cleanup');
};
}
</script>
<figure {@attach useZoom({ width: 400 })}>
<img src="photo.jpg" alt="zoomable" />
</figure>
快速参考
| 指令 | 用途 | 响应式？ |
|---|---|---|
{@attach} | 操作 DOM、第三方工具 | 是 |
{@html} | 渲染原始 HTML 字符串 | 是 |
{@render} | 渲染片段 | 是 |
{@const} | 块中的局部常量 | 不适用 |
{@debug} | 值变化时暂停调试器 | 不适用 |
{#each (key)} | 键控迭代（始终使用 key！） | 是 |
<svelte:window> | 窗口事件监听器 | 不适用 |
@attach 与 use: actions
| 特性 | use: | @attach |
|---|---|---|
| 参数变化时重新运行 | 否 | 是 |
| 可组合 | 有限 | 完全支持 |
| 传递 props | 手动 | 通过展开自动传递 |
| 转换旧版代码 | 不适用 | fromAction() |
参考文件
- attach-patterns.md - 真实场景中的 @attach 示例
- other-directives.md - @html、@render、 @const、@debug
注意事项
@attach要求 Svelte 5.29+- 使用
svelte/attachments中的fromAction转换旧版 actions - 展开 props 时，attachments 会通过包装组件传递
- 始终使用带 key 的 each 块——切勿将索引用作 key
- 全局事件请使用
<svelte:window>/<svelte:document>，不要使用$effect - 最后验证时间： 2026-03-12
评论
支持 Markdown