Svelte 最新中文文档翻译（9）—— bind: 模板语法

前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
bind:

数据通常是从父级流向子级。bind: 指令允许数据反向流动，从子级流向父级。
一般语法是 bind:property={expression}，其中 expression 是一个 lvalue（即一个变量或一个对象属性）。当表达式的标识符与属性同名时，我们可以省略表达式——换句话说，这两者是等价的：

1. [/code]Svelte 创建了一个事件监听器来更新绑定值。如果元素已经有一个相同事件的监听器，那个监听器会在绑定值更新之前触发。
2. 大多数绑定是 [i]双向的[/i]，这意味着对值的更改会影响元素，反之亦然。有一些绑定是 [i]只读的[/i]，这意味着更改它们的值不会对元素产生影响。
3. [size=5]函数绑定[/size]
5. 您还可以使用 bind:property={get, set}，其中 get 和 set 是函数，允许您进行验证和转换：
6. [code]<input bind:value={
7.         <Chart {width} {height} />() => value,
8.         <Chart {width} {height} />(v) => value = v.toLowerCase()}
9. />

复制代码

对于只读绑定如尺寸绑定，get 值应为 null：

1. ...

复制代码

[!NOTE]
函数绑定在 Svelte 5.9.0 及更新版本中可用。

在  元素上使用 bind:value 指令绑定输入的 value 属性：

1. <input bind:value={message} />
2. <p>{message}</p>

复制代码

对于数字输入（type="number" 或 type="range"），该值将被强制转换为数字（demo）：

1. <label>
2.         <Chart {width} {height} /><input type="number" bind:value={a} min="0" max="10" />
3.         <Chart {width} {height} /><input type="range" bind:value={a} min="0" max="10" />
4. </label>
6. <label>
7.         <Chart {width} {height} /><input type="number" bind:value={b} min="0" max="10" />
8.         <Chart {width} {height} /><input type="range" bind:value={b} min="0" max="10" />
9. </label>
11. <p>{a} + {b} = {a + b}</p>

复制代码

如果输入为空或无效（在 type="number" 的情况下），值为 undefined。
自 5.6.0 版本开始，如果  有 defaultValue 并且是表单的一部分，当表单被重置时，它将恢复为该值，而不是空字符串。请注意，对于初始渲染，除非绑定值为 null 或 undefined，否则绑定值优先。

1. <form>
2.         <Chart {width} {height} /><input bind:value defaultValue="not the empty string">
3.         <Chart {width} {height} /><input type="reset" value="Reset">
4. </form>

复制代码

[!NOTE]
请谨慎使用重置按钮，并确保用户在提交表单时不会意外点击它们。

复选框和单选输入可以绑定 bind:checked：

1. <form>
2.         <Chart {width} {height} /><input bind:value defaultValue="not the empty string">
3.         <Chart {width} {height} /><input type="reset" value="Reset">
4. </form>接受条款和条件

复制代码

自 5.6.0 版本开始，如果  有 defaultChecked 属性并且是表单的一部分，当表单被重置时，它将恢复为该值，而不是 false。请注意，对于初始渲染，除非绑定值为 null 或 undefined，否则绑定值优先。

1. <form>
2.         <Chart {width} {height} /><input bind:value defaultValue="not the empty string">
3.         <Chart {width} {height} /><input type="reset" value="Reset">
4. </form>

复制代码

一起工作的 input 元素，比如单选框、复选框，可以使用 bind:group。

1. [/code][indent][!NOTE] bind:group 仅在 input 位于同一 Svelte 组件中时才有效。
2. [/indent][size=5][/size]
4. 在  元素上使用 type="file" 时，您可以使用 bind:files 获取所选文件的 FileList。当您想以编程方式更新文件时，您始终需要使用 FileList 对象。目前无法直接构造 FileList 对象，因此您需要创建一个新的 DataTransfer 对象，并从中获取 files。
5. [code]<label for="avatar">上传图片：</label>
6. <input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
7. <button onclick={clear}>清空</button>

复制代码

FileList 对象也不能被修改，因此如果您想从列表中删除单个文件，则需要创建一个新的 DataTransfer 对象，并添加您想保留的文件。

[!NOTE] DataTransfer 在服务器端 JavaScript 运行时可能不可用。将绑定到 files 的状态保持未初始化可以防止组件在服务端渲染时出现潜在错误。

值绑定对应于所选  的 value 属性，可以是任何值（不仅仅是 DOM 中通常使用的字符串）。

1. <select bind:value={selected}>
2.         <Chart {width} {height} /><option value={a}>a</option>
3.         <Chart {width} {height} /><option value={b}>b</option>
4.         <Chart {width} {height} /><option value={c}>c</option>
5. </select>

复制代码

元素的行为类似于复选框组。绑定的变量是一个数组，其中包含与每个选定的  的 value 属性对应的条目。

1. <select multiple bind:value={fillings}>
2.         <Chart {width} {height} /><option value="Rice">米饭</option>
3.         <Chart {width} {height} /><option value="Beans">豆子</option>
4.         <Chart {width} {height} /><option value="Cheese">奶酪</option>
5.         <Chart {width} {height} /><option value="Guac (extra)">鳄梨（额外）</option>
6. </select>

复制代码

当  的值与其文本内容匹配时，可以省略该属性。

1. <select multiple bind:value={fillings}>
2.         <Chart {width} {height} /><option value="Rice">米饭</option>
3.         <Chart {width} {height} /><option value="Beans">豆子</option>
4.         <Chart {width} {height} /><option value="Cheese">奶酪</option>
5.         <Chart {width} {height} /><option value="Guac (extra)">鳄梨（额外）</option>
6. </select>

复制代码

您可以通过给  添加一个 selected 属性（如果是 ，那可以设置多个 selected 属性），为  设置默认值。
如果  是表单的一部分，在表单重置时将恢复到该选择。请注意，对于初始渲染，如果绑定的值不是 undefined，则绑定的值优先。

1. <select bind:value={selected}>
2.         <Chart {width} {height} /><option value={a}>a</option>
3.         <Chart {width} {height} /><option value={b}>b</option>
4.         <Chart {width} {height} /><option value={c}>c</option>
5. </select>

复制代码

元素有自己的一组绑定——五个双向绑定...

• currentTime
  
• playbackRate
  
• paused
  
• volume
  
• muted
  

...以及七个只读绑定：

• duration
  
• buffered
  
• paused
  
• seekable
  
• seeking
  
• ended
  
• readyState
  

1. [/code][size=5][/size]
3. 元素具有与 audio 元素相同的所有绑定，外加只读的 videoWidth 和 videoHeight 绑定。
4. [size=5]<img>[/size]
6. <img> 元素有两个只读绑定：
7. [list]
8. [*]naturalWidth
9. [*]naturalHeight
10. [/list][size=5][/size]
12. 元素绑定到 open 属性。
13. [code]<details bind:open={isOpen}>
14.         <Chart {width} {height} /><summary>How do you comfort a JavaScript bug?</summary>
15.         <Chart {width} {height} /><p>You console it.</p>
16. </details>

复制代码

可编辑内容绑定

具有 contenteditable 属性的元素支持以下绑定：

• innerHTML
  
• innerText
  
• textContent
  

[!NOTE] innerText 和 textContent 之间有微妙的差异。

1. [/code][size=5]尺寸[/size]
3. 所有可见元素都有以下只读绑定，通过 ResizeObserver 测量：
4. [list]
5. [*]clientWidth
6. [*]clientHeight
7. [*]offsetWidth
8. [*]offsetHeight
9. [/list][code]        <Chart {width} {height} />

复制代码

[!NOTE] display: inline 元素没有宽度或高度（除了具有“固有”尺寸的元素，如 <img> 和 ），并且无法通过 ResizeObserver 进行观察。您需要将这些元素的 display 样式更改为其他值，例如 inline-block。

bind:this

1. bind:this={dom_node}

复制代码

要获取对 DOM 节点的引用，请使用 bind:this。该值在组件挂载之前是 undefined —— 换句话说，您应该在 effect 或事件处理程序内部读取它，而不是在组件初始化期间读取：

1. [/code]组件也支持 bind:this，允许您以编程方式与组件实例进行交互。
2. [code]<ShoppingCart bind:this={cart} />
4. <button onclick={() => cart.empty()}> 清空购物车 </button>

复制代码

1. [/code][size=5]bind:[i]property[/i] for components[/size]
3. [code]bind:property={variable}

复制代码

您可以使用与元素相同的语法绑定组件属性。

1. [/code]虽然 Svelte 的 props 在不绑定的情况下是响应式的，但默认情况下这种响应性只能向下流入组件。使用 bind:property 可以让组件内部对属性的更改向上传递出组件。
2. 要将属性标记为可绑定的，请使用 $bindable 符文：
3. [code]

复制代码

将属性声明为可绑定意味着它 可以 使用 bind:，但不是说它 必须 使用 bind:。
可绑定属性可以有一个后备值：
[code][/code]此后备值 仅 在属性 未 被绑定时适用。当属性被绑定并且存在后备值时，父级必须提供一个不同于 undefined 的值，否则会抛出运行时错误。这可以防止出现难以推理的情况，即不清楚应该应用哪个值。
Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！