HarmonyOS 鸿蒙Next 父组件想调用子组件的方法 或者 子组件想调用父组件的方法

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

HarmonyOS 鸿蒙Next 父组件想调用子组件的方法 或者 子组件想调用父组件的方法

父组件想调用子组件的方法 或者 子组件想调用父组件的方法 该怎么用

Harmonyos Next教程
2 回复
父组件调用子组件的方法参考以下代码： 
[@Component](/user/Component)
struct Child {
  [@State](/user/State) private text: string = '初始值'
  private controller: ChildController = new ChildController();
  aboutToAppear() {
    if(this.controller) {
      this.controller.changeText = this.changeText
    }
    console.log('aaa')
  }
  private changeText = (value: string) =>{
    this.text = value
    console.log('bbb')
  }
  build() {
    Column() {
      Text(this.text)
    }
  }
}
class ChildController {
  changeText = (value: string) => {
    console.log('11111')
  }
}
export let ChildRef = new ChildController()
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Parent {
  // ChildRef = new ChildController()
  [@State](/user/State) noShow: boolean = false
  build() {
    Column() {
      Text('获取Child的exposeMethods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller: ChildRef })
      Child()
      Button('Parent调用childer的changeText').onClick(() => {
        ChildRef.changeText('Parent调用childer的changeText')
      })
    }
  }
}

子组件调用父组件的方法可参考[@BuilderParam](/user/BuilderParam)装饰器：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5

更多关于HarmonyOS 鸿蒙Next 父组件想调用子组件的方法 或者 子组件想调用父组件的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，实现父组件调用子组件方法或子组件调用父组件方法，可以通过以下方式实现：

父组件调用子组件方法：

  1. 在子组件中定义并暴露一个公共方法。
  2. 在父组件中通过@ref引用子组件实例。
  3. 使用引用实例直接调用子组件的方法。

示例代码：

<!-- 子组件 -->
<element name="Child">
  <property name="method" type="Function"></property>
  <template>
    <!-- 子组件内容 -->
  </template>
</element>

<!-- 父组件 -->
<Child ref="childRef"></Child>
<button @click="callChildMethod">调用子组件方法</button>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.someChildMethod();
    }
  }
}
</script>

子组件调用父组件方法：

  1. 在父组件中定义一个公共方法，并传递给子组件。
  2. 在子组件中通过属性接收父组件的方法，并调用。

示例代码：

<!-- 父组件 -->
<Child :parentMethod="parentMethod"></Child>

<script>
export default {
  methods: {
    parentMethod() {
      // 父组件方法内容
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="callParentMethod">调用父组件方法</button>
</template>

<script>
export default {
  props: {
    parentMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      this.parentMethod();
    }
  }
}
</script>

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部