【鸿蒙】关于自定义组件的跨页面和本页面的使用办法

一、理论概述

首先，自定义组件有代码的可复用性、ui分离、后续版本演进的效果。

也就是三大特点：可组合，可复用，数据驱动UI更新

    而他的基本结构，是基于struct实现，基本语法是：struct+自定义组件名+{……}，不能有继承关系。

    @Component：@Component装饰器仅能装饰struct关键字声明的数据结构

    build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

    @Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件

    注：自定义组件的成员函数是私有的，成员变量是私有的

*******！！！！ UI描述需要遵循以下规则：

@Entry装饰的自定义组件，其build()函数下的根节点唯一且必要，且必须为容器组件，其中ForEach禁止作为根节点。

@Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。

二、案例实际操作

好了，经过了一段长的理论描述， 我们通过一个小的案例来做一下：

首`先我们在本页做调用：

使用@Component装饰struct关键字声明的组件，然后用一个线性布局写组件。

@Component
export default struct musicPlayer {
  build(){
    // 播放器
    Row({space:20}){
      Image($r('app.media.data2')).width(30).borderRadius(50).margin({left:20})
      Text('overdise-14565').fontSize(20).width(156)
      Blank('10')
      Image($r('app.media.bofang')).width(30)
      Image($r('app.media.liebiao')).width(30)
    }.height(60).width('100%')
  }
}

然后，在build函数里面调用这个自定义组件

@Entry
@Component
struct Index{
  build(){
    Column(){
      musicPlayer()
    }.width('100%').height(300)

  }
}

然后，我们再看跨页面调用

    关于跨页面调用我们则需要用到两个关键字，export导出，import引用

    然后我们用例子演示一下，还是通过@component来装饰一下

@Component
export default struct musicPlayer {
  build(){
    // 播放器
    Row({space:20}){
      Image($r('app.media.data2')).width(30).borderRadius(50).margin({left:20})
      Text('overdise-14565').fontSize(20).width(156)
      Blank('10')
      Image($r('app.media.bofang')).width(30)
      Image($r('app.media.liebiao')).width(30)
    }.height(60).width('100%')
  }
}

然后，在struct关键字前导出这个组件，新建一个页面来进行导入调用

import music from './musicPlayer'

@Entry
@Component

struct Index{
  build(){
    Column(){
      music()
    }.width('100%').height(300)
  }

也是可以实现这个效果的 而且可以在其它页面调用