引言
子组件通过$emit触发事件,并传递数据,父组件在使用子组件时就可以绑定子组件事件,在事件处理函数中拿到子组件传来的数据
子组件传递数据
函数声明:$emit('事件名', 传递的数据 . . .)
子组件传递的数据会依次传递给父组件的事件函数
使用:
① 在html标签中使用
直接执行$emit()函数即可
<!-- 子组件名为search -->
<template>
<view class="root">
<input type="text">
<view class="search" @click="$emit('search', 100)">搜索</view>
</view>
</template>
② 在 js 代码中使用
-
通过defineEmits()函数定义事件
-
拿到返回对象触发事件
<!-- 子组件名为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>