In general, the data flow in Svelte is top-down. The parent component can set props on the child component, and the child component communicates with the parent component in the same way that the parent passes to the child component, but in some cases, you need to break this rule, especially when using form elements to receive user data

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

<! The bind directive updates the input value when changing the value of name and vice versa.
<! If you don't use bind, add an event handler (on:input) and set name to event.target.value. Think of bind as the syntactic sugar for the above -->
<input bind:value={name}>

<h1>Hello {name}!</h1>
Copy the code

Binding of form elements

Input [type=text]

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

<input bind:value={name}>

<h1>Hello {name}!</h1>
Copy the code

Number or range of input box input [type = number | range]

<! Svelte does not need to be converted. Svelte does the conversion for us.
<input type=number value={a} min=0 max=10>
<input type=range bind:value={a} min=0 max=10>
Copy the code

Check box input [type = checkbox]

<input type=checkbox bind:checked={yes}>
Copy the code

Input box group Radio & CheckBox

You can use the bind:group attribute with the value attribute when you have multiple input fields that need to be associated with the same value. Radio boxes in the same group are mutually exclusive; The selected values from the same set of checkboxes are pooled into an array

<! -- bind: group - group - the same name for a set of values for the value of the corresponding values -- -- >
<label><input type=radio bind:group={scoops} value={1}>One scoop</label>
<label><input type=radio bind:group={scoops} value={2}>Two scoops</label>
<label><input type=radio bind:group={scoops} value={3}>Three scoops</label>
Copy the code
<! -- Checkbox groups will be bound to an array -->
<input type=checkbox bind:group={flavours} name="flavours" value="Cookies"> Cookies
<input type=checkbox bind:group={flavours} name="flavours" value="Mint"> Mint
<input type=checkbox bind:group={flavours} name="flavours" value="Raspberry"> Raspberry
Copy the code

Multiline plain text textarea

<textarea bind:value={value}></textarea>

<! -- Attribute name and attribute value can be abbreviated (for all bidirectional bindings) -->
<textarea bind:value></textarea>
Copy the code

Select box select

<script>
  let questions = [
    { id: 1.text: `Where did you go to school? ` },
    { id: 2.text: `What is your mother's name? `}];// If the binding value is not set to an initial value, then the default is the first item in the list, i.e. Questions [0]
  let selected;
</script>

<! -- bind:value added to select
<select bind:value={selected} on:blur="{() => answer = ''}">
  {#each questions as question}
  <! In svelte, the value bound to option can be an object -->
  <option value={question}>
    {question.text}
  </option>
  {/each}
</select>

<! Select (); select (); select ();
<p>selected question {selected ? selected.id : '[waiting...] '}</p>
Copy the code

Select box select

<h2>Flavours</h2>

<! flavours is an array, not a normal value.
<select multiple bind:value={flavours}>
  {#each menu as flavour}
    <option value={flavour}>{flavour}</option>
  {/each}
</select>
Copy the code

Editable properties contenteditable

<! -- Add the contenteditalBe property to elements to make them editable -->
<! Elements with contenteditable="true" property support binding textContent and innerHTML -->
<div
  contenteditable="true"
  bind:innerHTML={html}
></div>
Copy the code

Bind in the each block

<! -- In Svelte, you can bind attributes in each block -->
{#each todos as todo}
  <div class:done={todo.done}>
    <input type=checkbox bind:checked={todo.done}>
    <input placeholder="What needs to be done?" bind:value={todo.text}>
  </div>
{/each}
Copy the code

Special binding

Size of the binding

  1. Each block-level element can be bound toclientWidth,clientHeight,offsetWidthAs well asoffsetHeight
  2. These bindings are read-only, modifiedw 或 hThe value of zero has no effect
  3. There is some overhead involved in using this type of measurement technique, so it is not recommended to use it on a large number of elements.
  4. display: inlineThe inline elements of are not measurable, nor are elements without child levels (e.g<canvas>), in which case you need to measure the outer element that surrounds it.
<div bind:clientWidth={w} bind:clientHeight={h}>
  <span style="font-size: {size}px">{text}</span>
</div>
Copy the code

Media related elements Audio & Video

< Audio > and

this

  1. Binding this is similar to the REF function of Vue in that it is used to retrieve the actual DOM object of the current component
  2. thisBindings apply to any element or component, allowing you to get references to rendered elements
  3. thisThe value obtained by the binding is read-only
  4. Before mounted, all DOM operations are invalid. Operations on DOM elements retrieved using this should be placed inonMountIn this life cycle function
<span bind:this={spanElem}>Hello Svelte</span>

<script>
	import { onMount } from 'svelte';
	let spanElem;
	
	onMount(() = > console.log(spanElem))
</script>
Copy the code

Component bindings

In Svelte, the component binding is similar to the.sync operator in Vue

<! -- Parent component -->
<script>
  let pin = ' '
</script>

<! Bind: XXX, the value of the parent component will change if the pin value is changed -->
<Keypad bind:value={pin} on:submit={handleSubmit}/>

<! ----------------------------------------------------------------->

<! -- Subcomponent -->
<script>
	export let value = ' ';
  
  // If you change the value in the child component, the pin in the parent component will change accordingly
  const select = num= > () = > value += num;
</script>

<button on:click="{select(1)}">+ 1</button>
Copy the code

Component binding needs to be done with care. If you have too much data in your App, especially if you don’t have a single data source,

It may be difficult to track the data flow associated with your App, so at this point you change the value in the child component, directly affecting the externally supplied state

<! -- Parent app.svelte -->
<script>
	import Keypad from './Keypad.svelte'
  let pin = ' '
	
	$: console.log('pin', pin)
</script>

<Keypad bind:value={pin} />

<! ----------------------------------------------------------------->

<! Keypad. Svelte -->
<script>
	export let value = ' '
	import Cpn from './Cpn.svelte'
</script>

<Cpn bind:value />

<! ----------------------------------------------------------------->

<! -- Subcomponent cpn.svelte -->
<script>
	export let value = ' ';
  
  const select = num= > () = > value += num;
	
	$: console.log('value', value)
</script>

<button on:click="{select(1)}">+ 1</button>
Copy the code