vue3子组件调用父组件的事件

在3中，子组件可以通过使用`emit()`方法来调用父组件的事件。首先，在子组件中定义一个点击事件，并使用`emit()`方法将事件传递给父组件。例如：

<template>
  <div>
    <button @click="sonClick('你好')">调用父组件事件</button>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'Son',
  props: ['son'], //接受父组件传过来的值
  emits: ['sonClick'], //传给父组件的事件
  setup(data, { emit }) {
    const state = reactive({
      info: data.son, //接收到父组件传过来的值
    })

    const sonClick = (data) => {
      console.log('我是子组件我要调用父组件事件')
      emit('sonClick', data) //第一个是事件，data为传递的参数
    }

    return {
      ...toRefs(state),
      sonClick,
    }
  },
})
</script>

然后，在父组件中将子组件放置在合适的位置。例如：

<div>
  我是父组件
  <Son></Son> <!-- 我是子组件 -->
</div>

这样，当子组件中的按钮被点击时，它会调用`sonClick()`方法并通过`emit()`方法将事件传递给父组件。