【通过 emit() 触发的​​自定义事件】

@[TOC](通过 emit() 触发的​​自定义事件​​)

子组件

<template>
  <el-form-item class="item-search">
    <el-button @click="emit('search')" color="#1AB394">
      <SvgIcon name="search" color="#fff" />
      <span style="color: #fff">搜索</span>
    </el-button>
    <el-button @click="emit('reset')" color="#F8AC59">
      <SvgIcon name="refresh" color="#fff" />
      <span style="color: #fff">重置</span>
    </el-button>
  </el-form-item>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  // 组件可以触发一个名为 reset 的事件，无参数。
  (e: "reset"): void;
  // 组件可以触发一个名为 search 的事件，无参数。
  (e: "search"): void;
}>();
</script>

<style scoped lang="scss">
.item-search {
  margin-left: 12px;
}
</style>

父组件使用

<FormSearch @reset="resetQuery()" @search="handleQuery()" />

<script setup lang="ts">
import FormSearch from "@/components/FormSearch/index.vue";

const handleQuery = () => {
  console.log("搜索参数:", { ...queryParams, dateRange: dateRange.value });
};

const resetQuery = () => {
  queryParams.roleName = "";
};
</script>