1.场景  封装一个公共组件  ，不同的父组件调用的时候可以传递不同的点击逻辑

1.1 公共组件

// 自定义按钮组件：CustomButton.ets
@Component
export struct CustomButton {
  // 组件属性：按钮文字（必传）
  @Prop label: string;
  // 组件属性：点击回调（可选）
  @Prop buttonClick?: () => void;

  build() {
    Button(this.label)
      .width(120)
      .height(40)
      .onClick(() => {
        // 关键：点击时先判断回调是否存在，存在则执行
        if (this.buttonClick) {
          this.buttonClick(); // 执行父组件传递的回调逻辑
        } else {
          console.log('未传入点击回调，执行默认逻辑');
          // 可选：组件内部的默认点击逻辑（如提示“按钮被点击”）
        }
      });
  }
}

2.父组件调用

// 父组件：ParentPage.ets
@Component
export default struct ParentPage {
  build() {
    Column() {
      // 1. 传入 buttonClick 回调（自定义点击逻辑）
      CustomButton({
        label: '有回调按钮',
        buttonClick: () => {
          console.log('父组件定义的点击逻辑执行');
          // 实际业务：如跳转页面、触发播放、提交表单等
          // router.pushUrl({ url: 'pages/DetailPage' });
        }
      })
      .margin(10);

      // 2. 不传入 buttonClick 回调（使用组件默认逻辑）
      CustomButton({ label: '无回调按钮' })
      .margin(10);

      // 3. 传入带业务逻辑的回调（如更新状态）
      CustomButton({
        label: '更新状态按钮',
        buttonClick: this.handleButtonClick.bind(this) // 绑定this上下文
      })
      .margin(10);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }

  // 父组件的业务方法（作为回调传入）
  handleButtonClick() {
    console.log('父组件业务方法执行');
    // 如更新组件状态：this.isShow = true;
  }
}