vue中父组件直接调用子组件方法（通过ref）

在Vue中，父组件可以通过使用ref属性来引用子组件实例，并通过这个引用调用子组件的方法。以下是一个简单的例子：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    'child-component': ChildComponent
  },
  methods: {
    callChildMethod() {
      // 使用$refs来访问子组件实例并调用其方法
      this.$refs.child.childMethod();
    }
  }
}
</script>

在这个例子中，父组件有一个按钮，当点击按钮时，会触发callChildMethod方法。这个方法通过this.$refs.child访问子组件实例，并调用子组件的childMethod方法。

确保在子组件中定义了childMethod方法：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>
 
<script>
export default {
  methods: {
    childMethod() {
      // 子组件的方法逻辑
      console.log('Child method called');
    }
  }
}
</script>

这样，当在父组件中点击按钮时，子组件的childMethod方法将被调用。