svelte中几个关键字总结

最新推荐文章于 2025-05-01 17:42:19 发布

闲欢

最新推荐文章于 2025-05-01 17:42:19 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： svelte 文章标签：前端框架开发语言前端

本文链接：https://blog.youkuaiyun.com/ramblerviper/article/details/124989770

svelte 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Svelte框架中的三个核心关键字：bind用于实现双向绑定，使得数据变化能即时反映到UI；this用于绑定DOM对象，便于直接操作DOM属性；let则用于插槽属性暴露，方便父组件获取子组件的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>