注：Vue3版本
主要流程：
1、父组件向子组件传递监听事件
点击查看代码
<myComponent @getMessage="getMessage"/>
2、子组件使用emit机制添加要监听的事件
点击查看代码
const emit=defineEmits(['getMessage'])
3、子组件添加点击事件，点击事件触发时调用监听事件并传递数据
点击查看代码
<button @click="sendMsg">点击发送</button>
const sendMsg=()=>{
emit('getMessage','this is son message')
}
点击查看代码
const getMessage=(msg)=>{
console.log(msg);
}
点击查看代码
<script setup>
import myComponent from './components/myComponent.vue'
//父组件接收数据
const getMessage=(msg)=>{
console.log(msg);
}
</script>
<template>
<div>
<!--父组件向子组件传递事件 -->
<myComponent @getMessage="getMessage"/>
</div>
</template>
<style scoped>
</style>
点击查看代码
<script setup>
//emit用来让父组件监听到触发的事件
const emit=defineEmits(['getMessage'])
//定义点击事件
const sendMsg=()=>{
emit('getMessage','this is son message')
}
</script>
<template>
<div>
<button @click="sendMsg">点击发送</button>
</div>
</template>
<style scoped>
button{
height: 80px;
width: 30px;
}
</style>