如何在 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"
等),但它也適用於其他類型的字段,比如 textarea
和 select
(稍後會詳細介紹 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
來綁定其打開/關閉值。
audio
和 video
媒體 HTML 標記允許您綁定它們的多個屬性: currentTime
、duration
、paused
、buffered
、seekable
、played
、volume
、playbackRate
。
textContent
和 innerHTML
可以在可編輯區域字段 contenteditable
上進行綁定。
對於這些特定的 HTML 元素來說,這些都是非常有用的功能。
只讀綁定
offsetWidth
、offsetHeight
、clientWidth
、clientHeight
可以在任何區塊級 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}
這可以產生有趣的場景。