script

一个script区域含有一个组件实例创建时的运行Javascript代码。 变量申明(或者引入的变量)在组件标签顶部显示申明。 这里有4条规则:

  1. export 用来申明组件的属性

Svelte 使用 export 这个关键字标识一个变量申明作为组件的属性prop,这意味着组件的使用者通过属性可以访问它。

赋值分配是响应式的

改变组件的state并触发组件重新渲染,只需要给本地的已申明变量赋值

使用表达式(count += 1)更新count的值和给属性赋值(obj.x = y)是等效的。

因为Svelte的响应式是基于赋值操作的,使用属性方法如 .push 和 .splice 将不会自动触发更新。有关解决此问题的选项,可以参考此教程

3 使用 $ 将表达式设为响应式的

任何顶层的表达式(不包含代码块和函数申明)可以通过一个$符号设置成响应式的。这是js的标签语法。当响应式表达式依赖的值发生变化时,它们会在组件更新前立即执行。

如果一个表达式是一条由完全未申明的变量组成的赋值语句,Svelte会替你插入一个let申明。

4 为Store添加$前缀来访问它们的值

任何时候,对于任意一个Store,你都可以在组件内部为该Store的引用添加$字符前缀来访问它的值。这会导致Svelte申明有前缀的变量,并且会设置一个Store订阅然后再适当的时候会取消这个订阅。

要注意,必须在组件的顶层申明Store,并且不可以包含在if代码块中

本地申明的变量(不代指store的值)不允许还有$前缀

results matching ""

    No results matching ""