vue3中父组件怎么给子组件传递函数然后再子组件中使用函数

在Vue3中，父组件想要向子组件传递一个函数，通常可以采用props（属性）的方式。父组件首先创建这个函数并将其作为prop传入子组件：

// 父组件 template 和 script 部分
<template>
  <div>
    <child-component :customFunction="myCallbackFunction" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myCallbackFunction: function(arg) {
        // 这里是父组件的函数实现
        console.log('Parent received:', arg)
      }
    }
  }
}
</script>

然后在子组件中，你可以像处理其他props一样接收并调用这个函数：

// 子组件 ChildComponent.vue
<template>
  <button @click="callParentFunction">点击调用父函数</button>
</template>

<script>
export default {
  props: {
    customFunction: { type: Function, required: true } // 指定 prop 的类型为函数，并且是必需的
  },
  methods: {
    callParentFunction() {
      this.customFunction('Hello from child component');
    }
  }
}
</script>

当你在子组件的按钮上触发`callParentFunction`方法时，会执行并调用从父组件传递过来的`myCallbackFunction`。