【Svelte从入门到精通】入门篇——数据与方法 Part3

双向绑定是数据变化驱动视图更新，视图更新触发数据变化。Vue和Svelte都支持双向数据绑定。在Vue中，我们通过v-model实现双向数据绑定，聪明的你可能会想，既然Svelte操作数据这么方便，那我直接写下这一段代码，那Svelte便能帮我们处理双向绑定了。

<script>
  let str = ''
</script>

<div>
  <input type="text" value={str} />
  <span>input value: {str}</span>
</div>

很遗憾，上述代码并没有帮我们处理双向绑定，如果我们想要做双向绑定，需要按下列写法：

<script>
  let str = ''
</script>

<div>
  <input type="text" bind:value={str} />
  <span>input value: {str}</span>
</div>

注意到区别了吗？没错，我们需要使用到 `bind`。bind除了做双向绑定外，还有其他用处，后面的章节我们会继续使用到这个指令。

表单组件的双向绑定

<script>
  let value = '';
</script>

<input type="text" value={value} />
<p>value: {value}</p>

如果我们按照vue的逻辑直接写出上述代码，会发现当我们在输入框内填写内容时，页面上并没有跟随输出。

<script>
  let value = '';
</script>

<input type="text" value={value} on:input="{e => value = e.target.value}" />
<p>value: {value}</span>

要实现双向的数据绑定，需要用到bind指令

input[type="text"]

<script>
  let value = '';
</script>

<input bind:value={value} />
<p>value: {value}</p>

input[type="number"]

<script>
  let value = 1;
</script>

<input type="number" bind:value={value} />
<input type="range" bind:value={value} min={1} max={5} />

input[type="checkbox"]

<script>
  let checked = false;
</script>

<label>
  <input type="checkbox" bind:checked={checked} />
  select: {checked}
</label>

input[type="radio"]

<script>
  let radioValue = "";
</script>

<label>
  <input type="radio" bind:group={radioValue} value={1} />
  1
</label>

<label>
  <input type="radio" bind:group={radioValue} value={2} />
  2
</label>

<label>
  <input type="radio" bind:group={radioValue} value={3} />
  3
</label>

<p>选择的是：{radioValue}</p>

bind:group

<script>
  let checkboxValue = [];
</script>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={1} />
  1
</label>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={2} />
  2
</label>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={3} />
  3
</label>

<p>选择的是：{checkboxValue.join(',')}</p>

select

<script>
  let selectValue;
</script>

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

<p>选择的是：{selectValue}</p>

除了以上列举的组件能够实现双向绑定外，Svelte还支持了许多元素的双向绑定，如textarea，媒体标签video、audio等等，读者们可深入探索。

自定义组件的双向绑定

<script>
  export let value;
</script>

<input bind:value={value} />

在这里我们遇到了一个新的关键字export，我们会在下一章讲解。

<script>
  import Child from './Child.svelte';
  let fatherValue = ''
</script>

<Child bind:value={fatherValue} />
<input bind:value={fatherValue} />

小结

本章我们学习了：

• 在Svelte中声明数据和更新数据
• Svelte中数组、对象更新时的小技巧
• 在Svelte中如何使用事件监听，以及在监听事件中修饰符的使用
• 在Svelte中使用`bind`实现表单类型组件的双向数据绑定