vue3中子父组件传值使用$emit全部代码

在Vue 3中，父子组件之间的通信通常通过事件（`v-on`）和自定义事件（`$emit`）来完成。如果你想从子组件向父组件传递数据，可以使用`$emit`触发一个自定义事件，并附带你要传递的数据。下面是一个简单的例子：

假设有一个`ChildComponent.vue`子组件，它想在按钮点击时通知父组件：

<!-- ChildComponent.vue -->
<template>
  <button @click="sendData">点击发送数据</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
function sendData() {
  const parentData = ref('这是来自子组件的数据'); // 存储你想传递给父组件的数据
  emit('customEvent', parentData.value); // 触发自定义事件并传递数据
}
</script>

然后，在父组件`ParentComponent.vue`中接收这个事件并处理它：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @customEvent="handleCustomEvent" />
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
function handleCustomEvent(data) {
  console.log('从子组件接收到的数据:', data);
}
onMounted(() => {}); // 如果需要，可以在挂载时做些初始化操作
</script>

在这个例子中，当子组件的按钮被点击时，会触发`customEvent`事件，将数据传给父组件的`handleCustomEvent`函数。