vue3子组件给父组件传递一个函数并携带参数

在Vue 3中，你可以通过使用$emit方法在子组件中触发一个自定义事件，并且可以携带参数。然后在父组件中使用v-on指令来监听这个事件，并且可以接收传递的参数。

下面是一个示例：

子组件 Child.vue：

<template>
  <button @click="handleClick">点击按钮</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 传递参数
      const message = 'Hello, World!';
      this.$emit('custom-event', message);
    }
  }
}
</script>

父组件 Parent.vue：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>接收到的消息: {{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleCustomEvent(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

在父组件中，我们使用v-on指令来监听子组件触发的custom-event事件，并在方法handleCustomEvent中接收传递的参数。然后我们将接收到的消息显示在页面上。

这样，当点击子组件中的按钮时，会触发自定义事件并传递参数，父组件会接收到这个事件并处理传递的参数