一、list组件
由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器
使用说明:
![](https://i-blog.csdnimg.cn/blog_migrate/0000bd3bd7437f650be6951fb53b958e.png)
示例:
![](https://i-blog.csdnimg.cn/blog_migrate/c064a6d00a254909356fbeb5d0790c06.png)
二、父子组件(自定义组件)
子组件导出用export语句
![](https://i-blog.csdnimg.cn/blog_migrate/40ade3870cb8e108817fa2bb9de3cb42.png)
父组件导入用import {子组件文件名称} from "子组件文件相对路径"
![](https://i-blog.csdnimg.cn/blog_migrate/84e1eeec75edb72065b9f40c6d11491c.png)
双向数据绑定
1.改变任何一方数据时,两方数据都会变为改变的一方数据
2.子组件中数据用@Link修饰
![](https://i-blog.csdnimg.cn/blog_migrate/18d32f4a600460876a00651123700dd3.png)
父组件中用@State修饰,在子组件接口中数据用$修饰
![](https://i-blog.csdnimg.cn/blog_migrate/4b8da47150df2e42885852f08359c0eb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/860501704d50681c2f641967146c90de.png)
三、if-else渲染
使用语法
if/else渲染可以改变组件的渲染状态,即决定组件是否在页面中被渲染。if括号内的变量是true的话,则对应下的组件都被渲染,否则都不被渲染。
注意事项
1.必须在容器组件内使用。
2.使用if/else可以使子组件的渲染依赖条件语句。
示例
1.使用if条件语句:
![](https://i-blog.csdnimg.cn/blog_migrate/850a129c83db70c746d85b00c7803030.png)
2.使用if、else if、else条件语句:
![](https://i-blog.csdnimg.cn/blog_migrate/03e5cb070f1dff654400b315703e47a3.png)
四、for循环渲染
开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。
ForEach定义如下:
使用语法
![](https://i-blog.csdnimg.cn/blog_migrate/5204ae7fad107535121ae03b541ae390.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e40674cd9c137d0d1e541dffb8689034.png)
注意事项
1.必须在容器组件内使用;
2.生成的子组件允许在ForEach的父容器组件中,允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中;
示例
简单类型数组示例:
![](https://i-blog.csdnimg.cn/blog_migrate/10bff60ccb82112ac952abeb277dec1a.png)