vue3子组件调用父组件的方法并传参

子组件可以通过 `defineEmits` 来定义父组件可以调用的方法，并且可以传递参数给父组件。在子组件中，你可以使用 `emits` 方法来触发定义的方法，并传递参数。下面是一个示例代码：

// 子组件
<script setup>
import { defineEmits } from 'vue'

const emits = defineEmits(['childFn'])

const handleClick = () => {
  emits('childFn', '这是子组件传递的参数')
}
</script>

在父组件中，你可以引入子组件，并使用 `@` 符号来监听子组件触发的事件。下面是一个示例代码：

// 父组件
<template>
  <div>
    父组件
  </div>
  <Child @childFn="handleChildFn" />
  <p>接收子组件传递的数据: {{ childData }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const childData = ref(null)

const handleChildFn = (data) => {
  console.log('子组件触发了父组件childFn，并传递了参数', data)
  childData.value = data
}
</script>