什么是 Vue 3 中的 `defineEmits`？

北辰alk2026-01-11 11:31

1. 引言

Vue 3 的 Composition API 简介

Vue 3 引入了 Composition API，旨在解决 Options API 在复杂组件中的局限性。Composition API 提供了一种更灵活的方式来组织和复用逻辑代码。

defineEmits 的作用与优势

defineEmits 是 Vue 3 中用于定义组件事件的方法，它允许开发者在 setup() 函数中定义和触发事件。defineEmits 的优势包括：

  • 类型安全：支持 TypeScript，提供更好的类型推断和代码提示。
  • 灵活性：允许动态定义事件，适应复杂的业务场景。
  • 代码简洁 ：通过 defineEmits 定义事件，减少冗余代码。

本文的目标与结构

本文旨在全面解析 Vue 3 中的 defineEmits，并通过详细的代码示例帮助读者掌握这些技巧。文章结构如下：

  1. 介绍 defineEmits 的基础知识和用法。
  2. 探讨 defineEmits 在组件通信中的应用。
  3. 提供性能优化建议和实战案例。

2. defineEmits 的基础

defineEmits 的定义与使用

defineEmits 是 Vue 3 中用于定义组件事件的方法，通常在 setup() 函数中使用。

示例代码

vue 复制代码 
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['increment']);

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
};
</script>

defineEmits 的参数与返回值

defineEmits 接收一个事件名称数组作为参数，返回一个 emit 函数。

示例代码

vue 复制代码 
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['increment']);

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
};
</script>

示例：简单的 defineEmits 使用

通过 defineEmits 定义一个 increment 事件，并在按钮点击时触发。

示例代码

vue 复制代码 
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['increment']);

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
};
</script>

3. defineEmits 与组件通信

使用 defineEmits 实现父子组件通信

defineEmits 用于定义子组件的事件，父组件通过监听这些事件实现通信。

示例代码

vue 复制代码 
<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @increment="handleIncrement" />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleIncrement() {
      this.count++;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['increment']);

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
};
</script>

使用 defineEmits 实现跨组件通信

通过 provide 和 inject 实现跨组件通信，结合 defineEmits 触发事件。

示例代码

vue 复制代码 
<!-- 祖先组件 -->
<template>
  <div>
    <ChildComponent />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    provide('increment', increment);

    return {
      count,
    };
  },
};
</script>

<!-- 后代组件 -->
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const increment = inject('increment');

    return {
      increment,
    };
  },
};
</script>

示例：在 setup() 中使用 defineEmits

通过 defineEmits 定义事件，并在 setup() 中触发。

示例代码

vue 复制代码 
<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @increment="handleIncrement" />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleIncrement() {
      this.count++;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['increment']);

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
};
</script>

4. defineEmits 与 TypeScript

在 defineEmits 中使用 TypeScript

TypeScript 提供了强大的类型支持，可以在 defineEmits 中使用。

示例代码

vue 复制代码 
<template>
  <button @click="increment">Increment</button>
</template>

<script lang="ts">
import { defineEmits, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const emit = defineEmits<{
      (e: 'increment'): void;
    }>();

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
});
</script>

类型推断与类型安全

TypeScript 可以自动推断 defineEmits 的类型，减少类型错误。

示例代码

vue 复制代码 
<template>
  <button @click="increment">Increment</button>
</template>

<script lang="ts">
import { defineEmits, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const emit = defineEmits<{
      (e: 'increment'): void;
    }>();

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
});
</script>

示例：类型化的 defineEmits

通过 TypeScript 增强 defineEmits 的类型安全。

示例代码

vue 复制代码 
<template>
  <button @click="increment">Increment</button>
</template>

<script lang="ts">
import { defineEmits, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const emit = defineEmits<{
      (e: 'increment'): void;
    }>();

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
});
</script>

5. defineEmits 的高级用法

使用 defineEmits 实现复杂事件处理

通过 defineEmits 定义复杂事件，并在 setup() 中处理。

示例代码

vue 复制代码 
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['click', 'custom-event']);

    const handleClick = () => {
      emit('click');
      emit('custom-event', 'Hello from child');
    };

    return {
      handleClick,
    };
  },
};
</script>

使用 defineEmits 实现自定义事件

通过 defineEmits 定义自定义事件，并在父组件中监听。

示例代码

vue 复制代码 
<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleCustomEvent(payload) {
      this.message = payload;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['custom-event']);

    const handleClick = () => {
      emit('custom-event', 'Hello from child');
    };

    return {
      handleClick,
    };
  },
};
</script>

示例：在 setup() 中实现复杂事件处理

通过 defineEmits 定义多个事件，并在 setup() 中处理。

示例代码

vue 复制代码 
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['click', 'custom-event']);

    const handleClick = () => {
      emit('click');
      emit('custom-event', 'Hello from child');
    };

    return {
      handleClick,
    };
  },
};
</script>

6. defineEmits 的性能优化

避免不必要的事件触发

通过条件判断避免不必要的事件触发。

示例代码

vue 复制代码 
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['click']);

    const handleClick = () => {
      if (shouldEmit) {
        emit('click');
      }
    };

    return {
      handleClick,
    };
  },
};
</script>

使用 defineEmits 优化事件处理性能

通过 defineEmits 优化事件处理逻辑，减少不必要的渲染。

示例代码

vue 复制代码 
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['click']);

    const handleClick = () => {
      emit('click');
    };

    return {
      handleClick,
    };
  },
};
</script>

示例：优化 defineEmits 的性能

通过条件判断和优化事件处理逻辑，提升性能。

示例代码

vue 复制代码 
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['click']);

    const handleClick = () => {
      if (shouldEmit) {
        emit('click');
      }
    };

    return {
      handleClick,
    };
  },
};
</script>

7. defineEmits 的测试与调试

使用 Vitest 测试 defineEmits

通过 Vitest 测试 defineEmits 的功能。

示例代码

javascript 复制代码 
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('测试 defineEmits', async () => {
  const wrapper = mount(MyComponent);
  await wrapper.find('button').trigger('click');
  expect(wrapper.emitted('click')).toBeTruthy();
});

使用 Vue Devtools 调试 defineEmits

通过 Vue Devtools 调试 defineEmits 的事件触发。

示例代码

javascript 复制代码 
// 在组件中使用 console.log 调试
export default {
  setup() {
    const emit = defineEmits(['click']);

    const handleClick = () => {
      console.log('Click event emitted');
      emit('click');
    };

    return {
      handleClick,
    };
  },
};

示例：测试与调试 defineEmits

通过 Vitest 和 Vue Devtools 测试与调试 defineEmits。

示例代码

javascript 复制代码 
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('测试 defineEmits', async () => {
  const wrapper = mount(MyComponent);
  await wrapper.find('button').trigger('click');
  expect(wrapper.emitted('click')).toBeTruthy();
});

8. 实战案例

案例一：实现一个计数器组件

通过 defineEmits 实现一个计数器组件，支持点击按钮增加计数。

示例代码

vue 复制代码 
<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @increment="handleIncrement" />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleIncrement() {
      this.count++;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(['increment']);

    const increment = () => {
      emit('increment');
    };

    return {
      increment,
    };
  },
};
</script>

案例二：实现一个表单验证组件

通过 defineEmits 实现一个表单验证组件，支持提交表单时触发验证事件。

示例代码

vue 复制代码 
<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @submit="handleSubmit" />
    <p>Validation Message: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleSubmit(isValid) {
      this.message = isValid ? 'Valid' : 'Invalid';
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <form @submit.prevent="submit">
    <input v-model="input" placeholder="Enter something" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { defineEmits, ref } from 'vue';

export default {
  setup() {
    const input = ref('');
    const emit = defineEmits(['submit']);

    const submit = () => {
      const isValid = input.value.length > 0;
      emit('submit', isValid);
    };

    return {
      input,
      submit,
    };
  },
};
</script>
相关推荐
咖啡无伴侣39 分钟前
1. 别再手动改代码格式了！Vue3 项目工程化规范搭建实战
vue.js·架构
知野小兔3 小时前
Vuex和Pinia状态管理
vue.js
VX_bysjlw9854 小时前
数码设备销售网站设计与实现39138-计算机毕设原创（免费领源码+带部署教程）
java·vue.js·spring boot·mysql·tomcat·mybatis·idea
whi8 小时前
一个小工具，解决了一个困扰 Vue 开发者多年的类型检查难题
vue.js·typescript
xcs1940520 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
雪芽蓝域zzs1 天前
第 5 节：Marker 点击弹出 InfoWindow 信息窗口
vue.js
大包子1 天前
structuredClone vs lodash.cloneDeep：核心差异与选型指南
javascript·vue.js
雪芽蓝域zzs1 天前
第 3 节：地图点击事件，点击获取经纬度
vue.js
WayneX1 天前
开源 Vue 3 组件库 Morya UI：把组件、文档、AI 工具链一起做进一个包
前端·vue.js·前端框架
hai_android1 天前
Chat 聊天模块功能总结
前端·javascript·vue.js
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10Telegram APK 下载安装完整指南 — 2026年最新