vue3语法糖写法中方法函数怎么子组件传递给父组件调用

在 Vue3 中，你可以通过在子组件中使用 `emit` 方法触发一个自定义事件，然后在父组件中使用 `@子组件自定义事件名` 的方式监听这个事件，并在对应的方法中处理子组件传递过来的数据。

以下是一个示例：

子组件：

<template>
  <button @click="onClick">点击触发事件</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    onClick() {
      this.$emit('custom-event', '子组件传递的数据')
    }
  }
})
</script>

父组件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>接收到的数据：{{ eventData }}</p>
  </div>
</template>

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

export default defineComponent({
  components: { ChildComponent },
  setup() {
    const eventData = ref('')
    const handleCustomEvent = (data) => {
      eventData.value = data
    }
    return { eventData, handleCustomEvent }
  }
})
</script>

在上面的示例中，子组件中通过 `$emit` 方法触发了一个名为 `custom-event` 的自定义事件，并且将一个字符串 `'子组件传递的数据'` 作为参数传递给了这个事件。在父组件中，我们使用 `@custom-event` 的方式监听了这个事件，并在 `handleCustomEvent` 方法中将子组件传递的数据存储到了 `eventData` 变量中，最终在模板中将其显示出来。