什么是 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>
相关推荐
于是我说10 小时前
Vue3 的 CompositionAPI 相较于 OptionsAPI，主要优势和适用场景有哪些
vue.js
VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue智慧养老院管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
如果你好10 小时前
Vue createRenderer 自定义渲染器从入门到实战
前端·javascript·vue.js
小高00710 小时前
读懂 Tailwind v4：为什么它是现代前端项目的必选项？
前端·javascript·vue.js
boooooooom10 小时前
computed、watch 与 watchEffect 的使用边界与实战指南
javascript·vue.js
WebGISer_白茶乌龙桃11 小时前
Vue3 + Mapbox 加载 SHP 转换的矢量瓦片 (Vector Tiles)
javascript·vue.js·arcgis·webgl
Pilot-HJQ11 小时前
固定 Element UI 表格表头的方法（超简单）
vue.js·学习·css3·html5
Aliex_git12 小时前
性能优化 - Vue 日常实践优化
前端·javascript·vue.js·笔记·学习·性能优化
qq_3168377512 小时前
Element-Plus el-table lazy 自动更新子列表
前端·vue.js·elementui
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03Linux下V2Ray安装配置指南04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05jdk21下载、安装（Windows、Linux、macOS）06Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定072025-04-03 Latex学习1——本地配置Latex + VScode环境08【踩坑笔记】50系显卡适配的 PyTorch 安装09UV安装并设置国内源10自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)