HarmonyOS 鸿蒙Next 两个页面使用同一自定义组件,均传递方法名相同的方法,在组件中执行该方法,都在一个页面中执行

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 两个页面使用同一自定义组件,均传递方法名相同的方法,在组件中执行该方法,都在一个页面中执行

页面A和页面B均使用一个组件,页面B为列表使循环用组件,都向组件传递一个方法,方法名相同,该方法在组件中是通过按钮点击事件执行。

1、打开页面A,点击组件按钮执行方法,在页面A执行方法,打开页面B;
2、页面B选择一个组件,点击组件按钮,在页面B执行方法,返回上一个页面即A页面;
3、在页面A,点击组件按钮,却在B页面执行方法,没有执行A页面的相应方法。应该是在A页面执
行方法,打开B页面。


更多关于HarmonyOS 鸿蒙Next 两个页面使用同一自定义组件,均传递方法名相同的方法,在组件中执行该方法,都在一个页面中执行的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
参考demo:
import { ItemDemo } from '../component/common/ItemDemo'
import { router } from '@kit.ArkUI'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page1 {
  handleClick() {
    router.pushUrl({ url: 'pages/Page8' })
    console.log('在页面A点击')
  }
  build() {
    Column() {
      ItemDemo({ name: '页面A', callBackFun: this.handleClick })
    }
  }
}
import { ItemDemo } from '../component/common/ItemDemo'
import { router } from '@kit.ArkUI'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page2 {
  handleClick() {
    router.back()
    console.log('在页面B点击')
  }
  build() {
    Column() {
      ItemDemo({ name: '页面B', callBackFun: this.handleClick })
    }
  }
}
[@Component](/user/Component)
export  struct ItemDemo {
  [@Prop](/user/Prop) name: string
  callBackFun?:  () => void
  build() {
    Button(this.name)
      .onClick(()=>{
        if (this.callBackFun) {
          this.callBackFun()
        }
      })
  }
}

更多关于HarmonyOS 鸿蒙Next 两个页面使用同一自定义组件,均传递方法名相同的方法,在组件中执行该方法,都在一个页面中执行的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,当两个页面使用同一自定义组件并传递方法名相同的方法时,可以通过组件内部的逻辑来区分是哪个页面触发了该方法。通常,组件可以通过传递额外的参数或上下文信息来识别调用源。

在组件内部,可以通过接口或回调来接收方法调用,并附带一个标识参数,该参数可以用来区分不同的页面调用。例如,可以在方法调用时附加一个页面标识符(如页面ID或页面名称),然后在组件的方法实现中根据这个标识符执行不同的逻辑。

如果组件中的方法需要在不同的页面执行不同的操作,可以在方法内部根据传递的页面标识符来调用不同的内部方法或执行不同的代码块。

示例如下:

// 组件方法接收调用
function receivedMethod(pageIdentifier, ...args) {
    if (pageIdentifier === 'Page1') {
        // 执行页面1的逻辑
        handlePage1Logic(...args);
    } else if (pageIdentifier === 'Page2') {
        // 执行页面2的逻辑
        handlePage2Logic(...args);
    }
}

通过这种方式,可以在组件中根据调用源执行不同的逻辑,而不会导致方法冲突。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部