如何在 Svelte 中使用綁定

使用 Svelte,您可以在數據和 UI 之間創建雙向綁定。

許多其他 Web 框架可以提供雙向綁定,這是一種非常常見的模式。

在表單中特別有用。

bind:value

讓我們從您通常會使用的最常見的綁定方式開始,您可以使用 bind:value 來應用它。您從組件狀態中獲取一個變量,並將它綁定到表單字段上:

<script>
let name = ''
</script>

<input bind:value={name}>

現在,如果 name 變量發生變化,輸入字段將更新其值。反之亦然:如果用戶更新表單,則 name 變量的值也會更改。

請注意,該變量必須使用 let/var 關鍵字定義,而不能使用 const,否則它無法被 Svelte 更新,因為 const 定義了一個值無法重新分配的變量。

bind:value 可以用於所有類型的輸入字段(type="number"type="email" 等),但它也適用於其他類型的字段,比如 textareaselect(稍後會詳細介紹 select)。

複選框和單選按鈕

複選框和單選按鈕(input 元素的 type="checkbox"type="radio")允許以下 3 種綁定方式:

  • bind:checked
  • bind:group
  • bind:indeterminate

bind:checked 允許我們將一個值綁定到元素的選中狀態:

<script>
let isChecked
</script>

<input type=checkbox bind:checked={isChecked}>

bind:group 對複選框和單選按鈕很有用,因為這些按鈕通常以組的形式使用。使用 bind:group,您可以將一個 JavaScript 數組關聯到一組複選框上,並根據用戶的選擇自動填充它。

以下是一個示例。goodDogs 數組根據我勾選的複選框填充:

<script>
let goodDogs = []
let dogs = ['Roger', 'Syd']
</script>

<h2>
 誰是乖狗狗?
</h2>

<ul>
{#each dogs as dog}
 <li>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></li>
{/each}
</ul>

<h2>
 我認為是乖狗狗的:
</h2>

<ul>
{#each goodDogs as dog}
 <li>{dog}</li>
{/each}
</ul>

參見示例:https://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58

bind:indeterminate 允許我們綁定到元素的 indeterminate 狀態(如果您想了解更多詳情,可以參考 https://css-tricks.com/indeterminate-checkboxes/)。

選擇字段

bind:value 也可以用於 select 表單字段,將所選值自動分配給變量的值:

<script>
let selected
</script>

<select bind:value={selected}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

{selected}

很酷的是,如果您從對象數組動態生成選項,選擇的選項現在是一個對象不是一個字符串:

<script>
let selected

const goodDogs = [
{ name: 'Roger' },
{ name: 'Syd' }
]
</script>

<h2>可能是好狗的列表:</h2>
<select bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>

{#if selected}
<h2>
 選擇的好狗狗:{selected.name}
</h2>
{/if}

參見示例:https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

select 還允許使用 multiple 屬性:

<script>
let selected = []

const goodDogs = [
 { name: 'Roger' },
 { name: 'Syd' }
]
</script>

<h2>可能是好狗的列表:</h2>
<select multiple bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>

{#if selected.length}
<h2>選擇的好狗狗:</h2>
<ul>
{#each selected as dog}
 <li>{dog.name}</li>
{/each}
</ul>
{/if}

參見示例:https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

其他綁定

根據您正在使用的 HTML 標記,您可以應用不同類型的綁定。

bind:files 是對 type="file" 輸入元素有效的綁定,用於綁定所選文件的列表。

details HTML 元素允許使用 bind:open 來綁定其打開/關閉值。

audiovideo 媒體 HTML 標記允許您綁定它們的多個屬性: currentTimedurationpausedbufferedseekableplayedvolumeplaybackRate

textContentinnerHTML 可以在可編輯區域字段 contenteditable 上進行綁定。

對於這些特定的 HTML 元素來說,這些都是非常有用的功能。

只讀綁定

offsetWidthoffsetHeightclientWidthclientHeight 可以在任何區塊級 HTML 元素上 只讀 綁定,這些元素不包括無效標籤(如 br)和設置為內聯的元素(display: inline)。

在 JavaScript 中獲取對 HTML 元素的引用

bind:this 是一種特殊類型的綁定,可以讓您獲得對 HTML 元素的引用並將其綁定到 JavaScript 變量:

<script>
let myInputField
</script>

<input bind:this={myInputField} />

當您需要在掛載後對元素應用邏輯時,這很方便,例如使用 onMount() 生命周期事件回調。

綁定組件屬性

使用 bind:,您可以將值綁定到組件公開的任何屬性。

假設您有一個 Car.svelte 組件:

<script>
export let inMovement = false
</script>

<button on:click={() => inMovement = true }>Start car</button>

您可以導入該組件並綁定 inMovement 屬性:

<script>
 import Car from './Car.svelte';

 let carInMovement;
</script>

<Car bind:inMovement={carInMovement} />

{carInMovement}

這可以產生有趣的場景。