svelte中几个关键字总结

在svelte中，有些关键字跟其他框架不一致，刚开始接触时会感觉比较奇怪，而且很难记住他们的使用场景，这里我一起总结一下，希望可以对比起来看，更容易理解。

bind

在我们需要双向绑定的时候，就用bind关键字，这样我们的值变化了，可以直接反应到页面UI上：

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

<input bind:value={name}>

<h1>Hello {name}!</h1>

将input的value绑定name，输入框中的输入更新时，name的值也会跟着改变！

this

绑定 this 与 Vue 的 ref 功能相似，都是为了取得当前组件的实际 DOM 对象。

<script>
	let text;
  function clickFunc() {
    alert(text.type);
  }
	
</script>

<div>
  <input type="text" value="input value" bind:this={text} on:click={() => clickFunc()}/>
</div>

将this绑定input这个dom，我们就可以在script中直接获取input的各种属性值了。

let

在插槽中添加了插槽属性，想要在父组件中将属性暴露出来，需要用let关键字。

# Click.svelte
<script>
    let clicked;

    function clickevent() {
        clicked = true;
    }
</script>


<div on:click={clickevent}>
    <slot click={clicked}></slot>
</div>

#App.svelte
<script>
	import Click from './Click.svelte';
	
</script>

<Click let:click={clicked}>
  <span>{clicked}</span>
</Click>