vue 父组件使用子组件的函数

在Vue中，父组件可以使用子组件的函数需要通过子组件的引用来实现。以下是一种常见的方式：

1. 在父组件中，使用`ref`属性引用子组件。

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildFunction">调用子组件函数</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildFunction() {
      this.$refs.child.childFunction(); // 调用子组件的函数
    }
  }
}
</script>

2. 在子组件中，定义需要被父组件调用的函数。

<template>
  <div>
    子组件内容
  </div>
</template>

<script>
export default {
  methods: {
    childFunction() {
      // 子组件逻辑
      console.log('子组件函数被调用');
    }
  }
}
</script>

在上述代码中，父组件通过`ref`属性将子组件引用为`this.$refs.child`，然后通过`this.$refs.child.childFunction()`来调用子组件的函数`childFunction()`。这样就实现了父组件使用子组件的函数。