前言,前面两篇说了一下基础组件和容器组件,今天说一下自定义组件。
什么是自定义组件?
简单来说,它就是由我们开发者自己定义的组件。
自定义组件的特点有哪些?
1、它可以让开发者组合使用单个或者多个系统组件(基础组件、容器组件等)包括它们的属性以及方法。
2、自定义组件可以被其他组件重复使用。
话不多说了,我还是直接上代码和效果图供大家观赏!
第一步:写一个名字为ChildComponent的组件文件,让这个自定义的组件被其他组件调用 。(注意,struct前面需要添加export关键字,意思是它可以被导出。不加@Entry,因为它是被显示页面调用,只有显示页面才加@Entry),代码如下:
@Component
export struct ChildComponent {
@State message: string = '张三';
build() {
Row() {
Text(this.message)
Button('点击').width(100).height(50).backgroundColor(Color.Red)
}
}
}
第二步:新建一个名字为ParentComponent的组件,然后在里面调用那个自定义组件,可以传入参数,也可以不传。(注意:第一行代码需要添加import 自定义组件的名字)代码如下:
import { ChildComponent } from './ChildComponent';
@Entry
@Component
struct ParentComponent {
build() {
Column() {
ChildComponent({ message: '李四' });
Divider()
ChildComponent();
}
}
}
另外,这几天学习中,我也遇到了几个问题,根据这些问题总结了对应可行的方法。
1、预览器可以点击、加载网络图片等效果 2、console.info()打印的时候如果数据太多无法显示(只能截取一部分显示), 而使用console.log()却可以显示(虽然只有一部分)数据 3、有时候发现写的代码没有达到预期效果,可以试试clean project 4、识别开发环境是否完备,欢迎界面单击Help > Diagnose Development Environment进行诊断 5、如果不写@Entry,就无法使用预览模式