arkTs 跨组件传输数据和组件封装_arkts 封装组件

父页面

import titleComponent from '../../components/TitleComponent'
 
@Component
export default struct Home {
  @State message: string = 'home页面'
 
  build() {
      Column({ space: 5 }) {
        titleComponent({
            title:"我是标题",
            content:"我是内容"
        })
      }
      .width('100%')
      .height("100%")
    }
}

子页面

 
@Component
export default struct titleComponent{
  private title = "第二期"
  private content = "/会议信息"
 
  build() {
    Column(){
     Text(this.title)
     Text(this.content)
    }.padding(10)
  }
}

即可解决父子组件传参问题

然后我个人组件封装思路

因为arkTs的样式编写需要一直点下去有几个样式就需要点几个如Text这组件部分，在复杂样式的情况这个链式操作会非常的长，所以为了方便日后使用，尽量官网的原生组件进行一次二次封装，如下

@Component
export default struct myText{
  private title = ""
  private color = ""
  private fontSize = "16"
  private fontWeight = ""
  private fontAlign = TextAlign.Center
 
 
 
  build() {
    Column(){
      Text(this.title)
        .fontColor(this.color)
        .fontSize(this.fontSize)
        .fontWeight(this.fontWeight)
        .textAlign(this.fontAlign)
    }
  }
}

使用如下,myText就是我封装的组件，这样使用即可

myText({
  color:"#000",
  fontSize:16,
  title:"文字",
  fontWeight:600
})

import myText from  "../components/MyText"
import myImg from  "../components/MyImg"
 
@Component
export default struct titleComponent{
  private titleColor = "#d3292b"
  private textColor = "#A7A7A7"
  private title = "第二期"
  private content = "/会议信息"
 
  build() {
    Column(){
      Flex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
        Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
          myImg({
            src:$rawfile("img/icon.png"),
            imgWidth:"35",
            imgHeight:"35"
          }).margin({right:8})
            myText({
              color:this.titleColor,
              fontSize:20,
              title:this.title,
              fontWeight:600
            }).margin({right:5})
            myText({
              color:this.textColor,
              fontSize:16,
              title:this.content,
              fontWeight:600
            })
        }.width(230)
        Column(){
          myText({
            color:this.textColor,
            fontSize:14,
            title:"更多",
            fontWeight:600
          })
        }
      }
    }.padding(10)
  }
}

以上是个人的思路想法，如有不足之处望体谅