vue3 组件emit传方法

在 Vue3 中，你可以通过 `emit` 事件来传递方法，具体步骤如下：

1. 在父级组件中定义一个方法，并将其作为参数传递给子组件：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :myMethod="myMethod" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: { ChildComponent },
  methods: {
    myMethod() {
      console.log('This is my method')
    }
  }
})
</script>

2. 在子组件中接收该方法作为 `props`，并使用 `emits` 选项声明一个名为 `my-event` 的自定义事件：

// ChildComponent.vue
<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    myMethod: {
      type: Function,
      required: true
    }
  },
  emits: ['my-event'],
  methods: {
    handleClick() {
      this.myMethod() // 调用父组件传递的方法
      this.$emit('my-event') // 触发自定义事件
    }
  }
})
</script>

在子组件中，我们使用 `props` 接收父组件传递的方法，并在 `handleClick` 方法中调用该方法。同时，我们在 `emits` 选项中声明一个名为 `my-event` 的自定义事件。在 `handleClick` 方法中，我们调用父组件传递的方法，然后使用 `$emit` 方法触发自定义事件。

在父组件中，我们可以在子组件上监听 `my-event` 自定义事件并执行相应的逻辑：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :myMethod="myMethod" @my-event="handleEvent" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: { ChildComponent },
  methods: {
    myMethod() {
      console.log('This is my method')
    },
    handleEvent() {
      console.log('Child component emitted my-event')
    }
  }
})
</script>

在父组件中，我们可以通过 `@my-event` 监听子组件的自定义事件，并执行相应的逻辑。

注意：如果你需要在子组件中传递函数参数，可以使用 `$listeners` 或者 `v-bind="$attrs"` 在子组件上绑定事件。具体使用方法可以参考 Vue3 官方文档中的说明。