Vue子组件向父组件传递事件

注：Vue3版本
主要流程：
1、父组件向子组件传递监听事件

点击查看代码

<myComponent @getMessage="getMessage"/>

2、子组件使用emit机制添加要监听的事件

点击查看代码

 const emit=defineEmits(['getMessage'])

3、子组件添加点击事件，点击事件触发时调用监听事件并传递数据

点击查看代码

<button @click="sendMsg">点击发送</button>
const sendMsg=()=>{
    emit('getMessage','this is son message')
  }

4、父组件监听的事件被调用后输出传递的数据

点击查看代码

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>