vue 父子组件传递函数

在Vue中，父组件向子组件传递函数可以通过props进行传递。具体的步骤如下：

1. 在父组件中定义一个函数，例如：

<template>
  <child-component :on-click="handleClick"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

2. 在子组件中通过props定义这个函数类型的变量，例如：

<template>
  <button @click="onClick">Click me</button>
</template>

<script>
export default {
  props: {
    onClick: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.onClick()
    }
  }
}
</script>

这样就可以在子组件中通过`this.onClick()`来调用父组件中传递过来的函数了。注意，在父组件中传递函数时，需要使用函数名而不是函数的调用结果，即在props中传递的是函数的引用而不是函数的返回值。

希望这个回答能够帮助到您！