Vue 3 中，子组件可以通过 emit 将参数传递到父组件

在 Vue 3 中，可以通过 emit 将参数从子组件传递到父组件。

1. 子组件中触发事件并传递参数

在子组件中，使用 emit 触发事件，并将参数作为第二个参数传递给 emit 方法。

<template>
  <button @click="handleClick">点击传递数据到父组件</button>
</template>

<script setup>
// 定义可以触发的事件
// 事件为customEvent
const emit = defineEmits(['customEvent'])

// 触发事件并传递参数：
// 在@click之后，会触发handleClick处理函数。
// emit()里面写的事件和参数，会被触发。
// 父组件会收到customEvent事件和参数。

const handleClick = () => {
  const dataToPass = {
    id: 1,
    name: '示例数据',
    value: '传递的值'
  }
  emit('customEvent', dataToPass) // 触发 customEvent 事件并传递 dataToPass 参数
}
</script>

2. 父组件中监听事件并接收参数

在父组件中，使用 @eventName="handlerFunction" 的语法来监听子组件触发的事件。事件处理函数会接收到子组件传递的参数。

<template>
  <ChildComponent @customEvent="handleCustomEvent" />
</template>

<script setup>
// 子组件
import ChildComponent from './ChildComponent.vue'

// 事件处理函数，接收子组件传递的参数
const handleCustomEvent = (data) => {
  console.log('父组件接收到的参数：', data)
  // 可以在这里进行进一步的逻辑处理
  console.log(`接收到的 ID 是：${data.id}`)
  console.log(`接收到的名称是：${data.name}`)
  console.log(`接收到的值是：${data.value}`)
}
</script>

3. 举例说明

• 子组件：使用 defineEmits 声明可以触发的事件，并通过 emit 触发事件：

• 在子组件的事件处理函数，会触发emit（save）函数，触发save事件，传递给父组件。

• 父组件：通过 @eventName="handlerFunction" 监听子组件触发的事件，事件处理函数会接收到子组件传递的参数。

• 

• save事件被触发，父组件会接收到，然后调用事件处理函数handleSave。