Vue中如何在父组件中调用子组件的方法

在Vue.js中，父组件想要调用子组件的方法，通常有两种常见的方法：

1. **通过props向下传递事件**: 父组件可以定义一个自定义事件，并将该事件作为prop传递给子组件。当子组件需要触发这个方法时，它可以在内部处理并触发这个事件，然后父组件通过监听这个事件来接收并调用子组件的方法。

<!-- 父组件 -->
<child-component @parentMethod="callChildMethod"></child-component>

<script>
export default {
  methods: {
    callChildMethod(data) {
      // 子组件传来的参数
      this.childMethod(data);
    }
  }
};
</script>

2. **直接引用子组件实例**: 如果父子组件有生命周期钩子（如`beforeCreate`、`mounted`等）或在同一模板中，可以直接在父组件的模板上绑定到子组件实例，然后调用子组件的方法。

<template>
  <div>
    <child-component ref="childRef" :data="someData"></child-ref>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

这里，`ref`属性用于获取子组件的实例，然后在`callChildMethod`函数中调用`methodToCall()`。