HarmonyOS鸿蒙Next中如何将子组件中的方法具体实现逻辑抛给调用它的父组件来实现呢？

HarmonyOS鸿蒙Next中如何将子组件中的方法具体实现逻辑抛给调用它的父组件来实现呢？ 鸿蒙的组件中有类似于Android中的接口概念吗？例如有一个子组件，里面有三个方法，a，b ，c，此三个方法的具体实现，通过接口抛给需要实现它的地方，java代码如下：

interface ViewListener {
    void a();
    void b();
    void c();
}

class ChildView extends View {
    private ViewListener listener;
    
    public void initListener(ViewListener lis) {
        this.listener = lis;
    }
    

    public ChildView(Context context) {
        super(context);
    }

    public ChildView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ChildView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    
    private void testA() {
        listener.a();
    }
    
    private void testB() {
        listener.b();
    }

    private void testC() {
        listener.c();
    }
}

class ParentView extends LinearLayout implements ViewListener {


    public ParentView(Context context) {
        super(context);
        init(context);
    }

    public ParentView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public ParentView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    
    private void init(Context context) {
        ChildView childView = new ChildView(context);
        this.addView(childView);
        childView.initListener(this);
    }

    @Override
    public void a() {
        // 具体实现
    }

    @Override
    public void b() {
        // 具体实现
    }

    @Override
    public void c() {
        // 具体实现
    }
}

对于鸿蒙的组件，该怎么实现这种场景呢？

这样写？

@Component
struct Child {
  @State private pageListener: OnPageListener

  aboutToAppear(): void {
    this.pageListener?.onC()
  }

  build() {
    Column() {
      Button('click')
        .onClick(() => {
          this.pageListener?.onA()
        })
      Button('selectedImg')
        .onClick(() => {
          this.pageListener?.onB()
        })
    }
  }
}

@Component
struct Parent {
 
  build() {
    Column() {
      Child()
    }
  }
}

interface OnPageListener {
  onA(): void
  onB(): boolean
  onC(): string
}

更多关于HarmonyOS鸿蒙Next中如何将子组件中的方法具体实现逻辑抛给调用它的父组件来实现呢？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

可以通过 @Link 装饰符实现组件之间的接口传递，我写了个小 demo 可以直接跑的，可以参考一下：

@Entry
@Component
struct Index {
  @State listener: Listener = {
    onA: (msg) => {
      // 收到回调，弹出提示
      promptAction.showToast({ message: msg })
    },
    onB: (msg) => {
      promptAction.showToast({ message: msg })
    }
  };

  build() {
    Column() {
      Child({
        listener: this.listener
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct Child {
  @Link listener: Listener;

  build() {
    Column() {
      Button('Call A')
        .onClick(() => {
          this.listener.onA('点击了按钮A');
        })

      Button('Call B')
        .margin(10)
        .onClick(() => {
          this.listener.onB('点击了按钮B');
        })
    }

  }
}

interface Listener {
  onA: (msg: string) => void;
  onB: (msg: string) => void;
}

更多关于HarmonyOS鸿蒙Next中如何将子组件中的方法具体实现逻辑抛给调用它的父组件来实现呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


为什么用 @Link 呢？改成 @Props 也可以吧？

我习惯了这么写啦，你也可以自己改成单向同步试试，

明白了，感谢大佬，

在HarmonyOS鸿蒙Next中，可以通过自定义事件或回调机制将子组件中的方法具体实现逻辑抛给父组件来实现。以下是具体实现方式：

  1. 自定义事件：在子组件中定义一个自定义事件，并在需要时触发该事件。父组件监听该事件并处理具体逻辑。

    • 子组件中定义事件：
      @Event('customEvent') customEvent: EventEmitter<void>;
    • 子组件中触发事件：
      this.customEvent.emit();
    • 父组件中监听事件并处理逻辑：
      <ChildComponent on:customEvent={this.handleCustomEvent} />
handleCustomEvent() {
    // 具体逻辑实现
}

  2. 回调机制：将父组件的方法作为回调函数传递给子组件，子组件在需要时调用该回调函数。

    • 父组件中定义回调函数：
      handleCustomLogic() {
    // 具体逻辑实现
}
    • 父组件将回调函数传递给子组件：
      <ChildComponent onCustomLogic={this.handleCustomLogic} />
    • 子组件中调用回调函数：
      props.onCustomLogic();

通过以上方式，可以将子组件中的方法具体实现逻辑抛给父组件来实现。

在HarmonyOS鸿蒙Next中，可以通过定义接口（Interface）将子组件中的方法逻辑抛给父组件来实现。具体步骤如下：

  1. 定义接口：在子组件中定义一个接口，包含需要父组件实现的方法。
  2. 实现接口：在父组件中实现该接口，并定义具体逻辑。
  3. 传递引用：将父组件的引用传递给子组件，通常通过构造函数或属性注入。
  4. 调用方法：在子组件中通过接口调用父组件实现的方法。

这种方式实现了子组件与父组件的解耦，增强了代码的复用性和灵活性。

回到顶部