鸿蒙应用开发记录点（持续更新）

#  @Link 组件数据双向绑定

在父组件给子组件中@Link装饰的参数传值时，应当在父组件中使用 $+参数传递，不使用this.+参数。

示例：

// 父组件
@Entry
@Component
struct Index {
  // 总数
  @State totalTask  :number = 0
  // 已完成数
  @State finishTask :number = 0

  build(){
    Column({space:10}){
      // 双向绑定时不使用this.totalTask，而应使用$totalTask，表示引用该参数
      TaskList({finishTask:$finishTask,totalTask:$totalTask})

    }
  }
}


//子组件
@Component
struct TaskList{

  // 双向绑定数据
  // 总数
  @Link totalTask :number
  // 已完成数
  @Link finishTask :number
  // 任务数据
  @State tasks :Task[] = []

  handleTaskChange(){
    // 更新任务总数
    this.totalTask = this.tasks.length
    // 更新已完成的数量
    this.finishTask = this.tasks.filter(itemF=> itemF.finished).length
  }


  build(){
    Column(){
      Button('新增任务')
        .width(200)
        .onClick(()=>{
          // 新增任务数据
          this.tasks.push(new Task())
          this.handleTaskChange()
        })
      List({space:10}){
        // 任务列表
        ...
    }
  }

}

其中仅@Link能接收对象类型，@Prop不能接收对象类型。

# 组件外方法传入组件内使用

当组件A需要使用到B组件的方法，且该方法操作了this.时，应使用.bind(this)将this绑定进组件。

示例：

 // 组件B
@Component
struct TaskList{

  @Link totalTask :number

  @Link finishTask :number
 
  @State tasks :Task[] = []

  handleTaskChange(){
   
    this.totalTask = this.tasks.length
    
    this.finishTask = this.tasks.filter(itemF=> itemF.finished).length
  }

  build(){
    Column(){
         ListItem(){
            TaskItem({item: item,onTaskChange:this.handleTaskChange.bind(this)})
         }
      }
    }
  }
}



// 组件A
@Component
struct TaskItem{
  @ObjectLink item:Task
  // 函数类型变量
  onTaskChange:()=>void
  build(){
    Row(){
      if(this.item.finished){
        Text(this.item.name)
          .finishedTask()
      }else {
        Text(this.item.name)
      }
      Checkbox()
        .select(this.item.finished)
        .onChange(val=>{
          this.item.finished = val
          this.onTaskChange()
        })
    }
  }
}

# router 要点