鸿蒙-父组件怎么调子组件方法

@Component
struct Child {
  @State private text: string = '初始值'
  private controller: ChildController = new ChildController();

  aboutToAppear() {
    if (this.controller) {
      this.controller.changeText = this.changeText
    }
    console.log('aaa')
  }

  build() {
    Column() {
      Text(this.text)
    }
  }

  private changeText = (value: string) => {
    this.text = value
    console.log('bbb')
  }
}

class ChildController {
  changeText = (value: string) => {
    console.log('11111')
  }
}


@Entry
@Component
struct Parent { 
   private  ChildRef = new ChildController()
  @State noShow: boolean = false

  build() {
    Column() {
      Text('获取Child的exposeMethods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller: this.ChildRef })
      Button('Parent调用childer的changeText').onClick(() => {
        this.ChildRef.changeText('Parent调用childer的changeText')
      })
    }
  }
}
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 3 中,组件想要调用组件方法通常使用 props(通信)或者自定义事件($emit 和 $on)。这里有两个主要的方式: 1. **Props(属性传递)**: 如果组件方法是公开的,并且需要组件提供数据或触发,可以通过 props 将这个方法暴露给组件组件可以通过传递一个方法组件的 `props` 中,然后在需要的时候调用。 ```html <!-- 组件 --> <child-component :callMyMethod="myMethod" /> <script setup> import { ref } from 'vue'; function myMethod() { // ... } </script> ``` 2. **自定义事件($emit 和 $on)**: 组件可以使用 `$emit` 发送一个自定义事件,组件监听这个事件并在接收到后执行相应的处理函数。组件在内部执行完任务后,可以使用 `$emit` 响应组件。 ```html <!-- 组件 --> <child-component @myCustomEvent="handleChildMethod" /> <script setup> function handleChildMethod(data) { // 在这里处理从组件传来的数据或调用组件方法 childComponentMethod(data); } </script> // 组件 <button @click="$emit('myCustomEvent', someData)">触发方法</button> ``` 在组件中,你可以定义一个方法并标记为 `$emit` 的接收者: ```html <template> <button @click="doSomething">执行操作</button> </template> <script setup> const doSomething = () => { // 执行任务 // ... // 然后发送事件给组件 this.$emit('myCustomEvent', 'data'); }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值