装饰器 | 描述 |
| 将结构体标记为可复用的UI组件,使其具有组件化能力,能够成为一个独立的组件。同时支持组件的生命周期管理和UI绘制。 |
| 将结构体标记为页面组件,代表一个完整的页面。被 |
| 标记一个类或对象的属性为状态信息,表示该属性会随着时间的推移而发生变化。当状态发生变化时,组件的UI会相应地更新。 |
| 在子组件中定义需要从父组件接收的属性,实现父组件到子组件的数据单向传递。 |
| 达成父组件与子组件之间的数据双向传递,允许子组件修改并同步数据回父组件。 |
| 跨组件传值,通过提供方( |
| 作用于应用全局的UI状态存储,允许在应用的多个部分之间共享和更新状态。 |
| 针对页面级别的UI状态存储,方便页面间数据共享和更新。 |
| 用于创建自定义构建函数,对重复的UI元素进行抽象,提高代码复用性。 |
| 引用自定义构建函数,为组件添加特定功能或参数。 |
| 定义组件的样式集合,允许将多条样式设置提炼成一个方法,便于复用。 |
| 在 |
| 允许组件在开发过程中进行预览,但注意它本身并不直接作为装饰器使用,而是通过与其他装饰器(如 |
我们来聊一聊组件如何通讯?
1、组件通讯需要用到 @State、@Prop、@Link、@Provide、@Consume 等装饰器。
2、父子单向通讯使用 @Prop 该装饰器在本地可以初始化,也可以不初始化。在调用自定义组件时需传参。
3、用 @Prop 修饰的数据改变不能引起视图更新,但是可以通过回调函数来修改父组件传过来的数据。
4、在使用 @Prop 装饰器时,有时会出现一种数据没变而视图更新的假象,这时可以通过打印数据或者利用 @Watch 装饰器对数据进行监听。
5、父子双向通信使用 @Link,用 @Link 装饰器修饰的数据不能在本地初始化,在调用自定义组件时需传参。数据改变会同步到父组件,进而视图会更新。但是,当数据为对象嵌套,数组对象、二维数组时,使用 @Observed 和 @ObjecktLink 更合适。@Observed 用于修饰定义数据时的类, @ObjecktLink 用于装饰子组件的数据。
6、@Provide,@Consume 装饰器用于跨层级组件通讯。前者需在本地初始化,后者不能在本地初始化。在调用自定义组件时无需传参。