HarmonyOS 界面之间有混合展示的，怎么组件化？

// 定义一个空的builder 
@Builder 
function defaultBuilder(): void {} 
 
// 定义一个class，有对应的WrappedBuilder 
export class DataModel { 
  id: string = '' 
  value: string = '' 
  otherProp: string = '' 
  builderWrap: WrappedBuilder<[string]> = wrapBuilder(defaultBuilder) 
 
  constructor(id: string, value: string, builderWrap: WrappedBuilder<[string]>) { 
    this.id = id 
    this.value = value 
    this.builderWrap = builderWrap 
  } 
} 
 
@Builder 
function CustomBuilder(param: string) { 
  CustomPage() 
} 
 
@Component 
struct CustomPage { 
  @State message: string = 'CustomPage'; 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
} 
let customPageWrappedBuilder: WrappedBuilder<[string]> = wrapBuilder(CustomBuilder); 
 
export const data: DataModel = new DataModel('1', 'test', customPageWrappedBuilder)

import { DataModel, data } from './dataModel' 
@Entry 
@Component 
struct TestPage { 
  testData: DataModel | null = null 
 
  aboutToAppear(): void { 
    this.testData = data 
  } 
  build() { 
    Column() { 
      // 如果不需要参数，直接传空就行了 
      this.testData?.builderWrap.builder('') 
    } 
  } 
}

import { DataModel, getData } from './DataModel' 
@Entry 
@Component 
struct TestPage { 
  testData: DataModel[] = [] 
 
  async aboutToAppear() { 
    this.testData = await getData() 
  } 
  build() { 
    Column() { 
      ForEach(this.testData, (item: DataModel) => { 
        item.builderWrap.builder(item.value) 
      }) 
    } 
  } 
}