svelte-template-directives

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Svelte Template Directives

Svelte模板指令

@attach (Svelte 5.29+)

@attach（Svelte 5.29+）

The reactive alternative to
use:
actions. Re-runs when dependencies change, passes through components via spread, supports cleanup functions.

svelte

<script>
	import ImageZoom from 'js-image-zoom';

	function useZoom(options) {
		return (element) => {
			new ImageZoom(element, options);
			return () => console.log('cleanup');
		};
	}
</script>

<!-- Re-runs if options changes (use: wouldn't!) -->
<figure {@attach useZoom({ width: 400 })}>
	<img src="photo.jpg" alt="zoomable" />
</figure>

use:
动作的响应式替代方案。当依赖项变化时重新运行，通过展开语法传递到组件，支持清理函数。

svelte

<script>
\timport ImageZoom from 'js-image-zoom';

\tfunction useZoom(options) {
\t\treturn (element) => {
\t\t\tnew ImageZoom(element, options);
\t\t\treturn () => console.log('cleanup');
\t\t};
\t}
</script>

<!-- 当options变化时重新运行（use:不会！） -->
<figure {@attach useZoom({ width: 400 })}>
\t<img src="photo.jpg" alt="zoomable" />
</figure>

Quick Reference

快速参考

Directive	Purpose	Reactive?
`{@attach}`	DOM manipulation, 3rd-party	Yes
`{@html}`	Render raw HTML strings	Yes
`{@render}`	Render snippets	Yes
`{@const}`	Local constants in blocks	N/A
`{@debug}`	Pause debugger on value change	N/A
`{#each (key)}`	Keyed iteration (always key!)	Yes
`<svelte:window>`	Window event listeners	N/A

指令	用途	响应式？
`{@attach}`	DOM操作、第三方库	是
`{@html}`	渲染原始HTML字符串	是
`{@render}`	渲染代码片段	是
`{@const}`	代码块中的本地常量	不适用
`{@debug}`	值变化时暂停调试器	不适用
`{#each (key)}`	带键的迭代（务必使用键！）	是
`<svelte:window>`	窗口事件监听器	不适用

@attach vs use: Actions

@attach vs use: 动作

Feature	`use:`	`@attach`
Re-runs on arg change	No	Yes
Composable	Limited	Fully
Pass through props	Manual	Auto via spread
Convert legacy	N/A	`fromAction()`

特性	`use:`	`@attach`
参数变化时重新运行	否	是
可组合性	有限	完全支持
传递props	手动	通过展开自动传递
转换旧版动作	不适用	`fromAction()`

Reference Files

参考文件

attach-patterns.md - Real-world @attach examples
other-directives.md - @html, @render, @const, @debug

attach-patterns.md - @attach的真实场景示例
other-directives.md - @html、@render、@const、@debug相关内容

Notes

注意事项

```
@attach
```
requires Svelte 5.29+
Use
```
fromAction
```
from
```
svelte/attachments
```
to convert legacy actions
Attachments pass through wrapper components when you spread props
Always use keyed each blocks — never use index as key
Use
```
<svelte:window>
```
/
```
<svelte:document>
```
for global events, not
```
$effect
```
Last verified: 2026-03-12

```
@attach
```
需要Svelte 5.29+版本
使用
```
svelte/attachments
```
中的
```
fromAction()
```
转换旧版动作
当你展开props时，附件会传递到包装组件中
务必使用带键的each代码块——永远不要用索引作为键
使用
```
<svelte:window>
```
/
```
<svelte:document>
```
处理全局事件，而非
```
$effect
```
**最后验证时间：**2026-03-12

",