阿岚 进阶
前端工程师 · Lv.3
Lv.3 的权限预览：仅可查看自己的项目
组件通信
组件之间怎么传数据、怎么回传事件、怎么共享状态 —— 这四个模式覆盖了绝大多数场景。
$props$bindablecallback propssnippets
props — 从父到子单向传递
用 $props() 声明入参，支持默认值。子组件内部用 $derived 处理这些值。
陈舟 进阶
设计工程师 · Lv.4
林晚
后端工程师 · Lv.2
拖动滑块改变「阿岚」的 level：达到 5 时卡片高亮、徽章出现，这些都是子组件内部的 $derived 自动算出的。
回调 props — 从子到父回传事件
Svelte 5 移除了 createEventDispatcher，直接把函数作为 prop 传给子组件即可。
阿岚 核心导师
前端 · Lv.5
陈舟 进阶
设计 · Lv.3
林晚 进阶
后端 · Lv.4
剩余 3 人
bind: — 组件级双向绑定
子组件用 $bindable() 声明可绑定的 prop，父组件加 bind: 前缀即可获得双向同步。
圆角 12px
内边距 16px
阴影 8px
实时预览
这些滑块来自子组件，值与父组件的状态双向同步。
style="border-radius:12px; padding:16px; box-shadow:0 4px 8px rgba(0,0,0,0.18)"snippets — 可复用的内容插槽
snippet 是可传参的模板片段，既能当默认插槽，也能当具名插槽使用。
提示
这是一段由 snippet 传入的内容，父组件决定渲染什么。