Vue3通过$emit实现子向父传递数据

引言

        子组件通过$emit触发事件，并传递数据，父组件在使用子组件时就可以绑定子组件事件，在事件处理函数中拿到子组件传来的数据

子组件传递数据

函数声明：$emit('事件名', 传递的数据 . . .)

                子组件传递的数据会依次传递给父组件的事件函数

使用：

① 在html标签中使用

直接执行$emit()函数即可

<!--    子组件名为search -->
<template><view class="root"><input type="text"><view class="search" @click="$emit('search', 100)">搜索</view></view>
</template>

② 在 js 代码中使用

1. 通过defineEmits()函数定义事件

2. 拿到返回对象触发事件

<!--    子组件名为search -->
<template><view><view class="root"><input type="text"><view class="search" @click="search">搜索</view></view></view>
</template>
​
<script setup>import {defineEmits} from 'vue';//  定义事件const emit = defineEmits(['search'])//  触发事件的函数const search = () => {//  触发该组件的search事件emit('search', 100)}
</script>

父组件接收数据

绑定子组件定义的事件，通过事件处理函数的参数获取传来的数据

<template><view class="root"><!-- 绑定事件函数 --><search @search="getSearchData"></search></view>
</template>
​
<script setup>const getSearchData = (data) => {//  拿到子组件传递来的数据console.log(data)}
</script>