鸿蒙开发——自定义组件的两种方式和全局、局部自定义构建函数和公共、局部样式的定义

第一种当前页用定义组件，只能当前页面使用

1.现在当前页定义一个主体在协商结构体，如图
2.再把你想写成组件代码写到bulid里面

3.再修改提前写好的标题代码，把标题写成变量，定义私用参数，样式微调

4.页面调用当前页组件，组件名({参数名:参数})，这个组件也是可以单独加样式

是不是非常的开门

第二种方式导入式组件，适用于多个页面都要用的的组件，比如头顶标题

1.创建组件文件 ，这个文件名随意哈

2.里面创建文件

3.我比较懒，就不重写一遍了，所以直接把之前的写好的代码弄过来，并用export导出这个组件，但是用到的路由别忘了在这里导入一下否侧报错

4.然后用import在这个页面导入这个组件

全局自定义构建函数

1.定义全局自定义构建函数，名字随意，不过最好首字母大写

2.把列表代码弄进来并加上参数值，比如我这个列表里面的内容

3.传参调用这个全局自定义构建函数，就会发现没了的列表又出现了

局部自定义构建函数

这个就比较简单了，直接复制过来把function去掉就ok了

但是呢调用得加上this了，因为从全局变成局部了

定义公共样式（注：里面必须写全部组件通用样式否侧报错，要想写别的特有属性的话往下滑去看注意事项里面）

1.定义

2.公用的样式放进去，比如Column整体样式

3.使用这个样式，有没有发现有css那味道了

局部样式的定义

道理都是一样的，都是放进去的把function去掉，但是调用不变，并不用加this，原封不动就行了

注意事项

写着写着会发现Header这里突然报错了，翻来覆去的找原因，尝试各种修改，发现还是提示ui不支持这种写法，遇到这种情况就去把自定义组件文件夹下面自动生成的.js和.map的文件，删掉就能正常编译了

如果你写Styles全局样式的时候写组件特有属性的时候你会发现报错了，说你写的这两个属性不是公共属性，那怎么办呢

这个时候就不要用Styles了咱们用继承的方式Extend（组件），这样就不会报错了，

注意：继承模式他只能写在全局位置