【关键字】
父组件 / 方法 / 传递 / 子组件
【问题描述】
下图蓝色框为父组件,绿色框为子组件,点击“更多”时需要执行不同逻辑。
父组件中定义了点击事件执行的方法,如何通过参数传递给子组件执行?
【解决方案】
示例代码如下:
import { router } from '@kit.ArkUI'
@Entry
@Component
struct ParentPage {
build() {
Column() {
MyComponent({
disText: '我是子组件1', onClickEvent: (): void => {
router.pushUrl({ url: 'pages/Index' })
}
})
MyComponent({
disText: '我是子组件2', onClickEvent: (): void => {
router.pushUrl({ url: 'pages/ImagePage' })
}
})
}
.width('100%')
.height('100%')
}
}
@Component
struct MyComponent {
@State disText: string = ''
onClickEvent?: () => void
build() {
Column() {
Text(this.disText)
.fontSize(30)
.onClick(() => {
if (this.onClickEvent !== undefined) {
this.onClickEvent()
}
})
}
}
}