uniapp子组件调用父组件中的方法

在UniApp中，子组件如果需要调用父组件的方法，通常通过事件总线（Event Bus）或props来进行。这里简单介绍两种常见的方式：

1. **通过事件触发**：
- 子组件可以定义一个自定义事件，例如`emit('parentMethod', 参数)`, 这会触发一个名为`parentMethod`的事件。
- 父组件监听这个事件，通过`on(parentMethod, handler)`注册处理函数，在该函数中可以访问到传来的参数并执行相应的操作。

// 子组件
Page({
  methods: {
    callParentMethod() {
      this.$emit('parentMethod', '传递给父组件的数据');
    }
  }
})

// 父组件
Component({
  methods: {
    handleParentMethod(data) {
      console.log(`子组件发送过来的数据：${data}`);
    },
    mounted() {
      this.$on('parentMethod', this.handleParentMethod);
    },
    beforeDestroy() {
      this.$off('parentMethod', this.handleParentMethod);
    }
  }
})

2. **通过Props传递（父子通讯）**：
- 子组件将需要调用的方法名作为属性`propName`传给父组件。
- 父组件提供相应的方法供子组件调用，如`this.$emit('invokeMethod', 'methodName')`。

// 父组件
<template>
  <child-component :callMethod="handleMethod" />
</template>

<script>
export default {
  methods: {
    handleMethod(name) {
      // 执行对应的方法
      this[name]();
    }
  }
}
</script>

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

<script>
import { watch } from '@dcloudio/vue-cli-plugin-uni';

export default {
  methods: {
    callParentMethod() {
      this.$parent.invokeMethod('yourParentMethod');
    }
  },
  watch: {
    '$parent': {
      deep: true,
      handler() {
        if (this.$parent && this.$parent.handleMethod) {
          // 初始化调用
          this.callParentMethod();
        }
      },
      immediate: true
    }
  }
};
</script>