VUE3中子传父主要通过emit函数发送自定义事件和内容，父组件监听自定义事件来实现数据通信。
子组件 父组件
+-----------------+ +-----------------+
| | | |
| | | |
| | | |
| 触发 emit | ----> | 监听事件(@event) |
| | | |
| | | |
| | | |
+-----------------+ +-----------------+
在这个示意图中：
- 子组件通过调用
emit方法触发了一个自定义事件。 - 父组件在模板中使用事件监听器(
@event)来监听这个自定义事件。 - 当子组件触发自定义事件时，父组件中相应的事件处理函数会被调用。
- 通过这个过程，子组件可以向父组件传递数据或通知父组件某个事件的发生。
这是一个简单的视觉化描述emit方法在子组件和父组件之间进行通信的方式。父子组件之间的通信可以使用自定义事件来实现，而emit方法是Vue.js中用于触发这些事件的重要工具。
示例
<!-- 子组件 ChildComponent.vue -->
<template>
<button @click="sendDataToParent">传递数据给父组件</button>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['custom-event']);
const counter = ref(0)
const sendDataToParent = () => {
counter.value = counter.value + 1
const data = '这是子组件传递的数据' + counter.value.toString()
emit('custom-event', data);
}
</script>
<!-- 父组件 ParentComponent.vue -->
<template>
<div>
<p>从子组件接收到的数据: {{ receivedData }}</p>
<ChildComponent @custom-event="handleCustomEvent" />
</div>
</template>
<script setup>
import ChildComponent from './传递组件/ChildComponent.vue';
import {ref} from 'vue'
const receivedData = ref("")
const handleCustomEvent = (data) => {
receivedData.value = data
}
</script>
示例：
