写一个vue2的父组件触发子组件的函数方法案例

在 Vue.js 中，父组件可以通过 `props`（属性）向下传递数据，而当需要在父组件中触发子组件的方法时，通常使用自定义事件或者通过 `methods` 或者 `emits` 配合使用。

以下是一个简单的例子：

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child-component @child-method="handleChildMethod"></child-component>
    <button @click="callChildMethod">触发子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    },
    // 假设子组件有个名为childMethod的方法
    handleChildMethod(data) {
      console.log('Received data from child:', data);
    }
  }
};
</script>

在这个例子中：
- 父组件通过 `@child-method` 触发器监听子组件的 `child-method` 方法。
- `callChildMethod` 方法是在父组件的模板上绑定了点击按钮的事件处理器，当按钮被点击时，它会调用 `this.$refs.childComponent.childMethod()` 来执行子组件的方法。
- `handleChildMethod` 是父组件的方法，用于接收并处理子组件传来的数据。

请注意，`$refs` 是一个特殊的属性，用于访问已渲染后的DOM元素，只有在`mounted`生命周期钩子完成后才能使用。子组件需要声明一个同名的事件或者方法供父组件调用。