Vue3的definePros和defineEmits使用及说明

更新时间：2025年10月11日 09:52:55 作者：whale fall

Vue3中的defineProps和defineEmits是组合式API的一部分,用于定义组件的props和事件,defineProps简化了props的定义和类型安全,而defineEmits则用于声明和触发组件的自定义事件,确保事件名称的类型安全

1.defineProps

defineProps 用来定义组件的 props，即组件从父组件接收的属性。它使得在 <script setup> 中使用 props 变得更加简单和类型安全。

基本用法

<script setup>
import { defineProps } from 'vue';

// 定义 props
const props = defineProps({
  msg: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
});
</script>

<template>
  <div>
    <p>{{ props.msg }}</p>
    <p>{{ props.count }}</p>
  </div>
</template>

解释

defineProps 接收一个对象，可以为每个 prop 提供类型、默认值、是否必填等信息。
在 <template> 中直接访问 props，无需手动定义 props。

类型推导

如果使用 TypeScript，可以通过类型推导让 props 更加明确和安全：

<script setup lang="ts">
import { defineProps } from 'vue';

interface Props {
  msg: string;
  count: number;
}

const props = defineProps<Props>();
</script>

2.defineEmits

defineEmits 用于定义组件触发的 自定义事件。它让你在 <script setup> 中声明组件发出的事件，并确保事件名称的类型安全。

基本用法

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

// 定义事件
const emit = defineEmits<{
  (event: 'update', newValue: string): void;
}>();

// 触发事件
const changeValue = () => {
  emit('update', 'new value');
};
</script>

<template>
  <button @click="changeValue">Change Value</button>
</template>

解释

defineEmits 接受一个对象或类型，它定义了所有可能触发的事件及其参数类型。
emit 是一个函数，用于触发自定义事件，在 Vue 3 中无需手动绑定 $emit。

多事件支持

你也可以定义多个事件：

<script setup>
const emit = defineEmits<{
  (event: 'update', newValue: string): void;
  (event: 'delete', id: number): void;
}>();
</script>

3.组合使用

你可以在一个组件中同时使用 defineProps 和 defineEmits，以便管理组件的输入和输出。

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

// 定义 props
const props = defineProps({
  title: String
});

// 定义事件
const emit = defineEmits<{
  (event: 'updateTitle', newTitle: string): void;
}>();

// 触发事件
const updateTitle = () => {
  emit('updateTitle', 'New Title');
};
</script>

<template>
  <h1>{{ props.title }}</h1>
  <button @click="updateTitle">Update Title</button>
</template>

总结

defineProps：用于定义组件的输入（即 props），提供了类型推导和默认值的支持。
defineEmits：用于定义组件的输出（即触发的事件），提供了事件类型安全。

这两个方法大大简化了组件的编写，使得代码更加简洁、可维护，并且提供了更强的类型安全。如果你用 TypeScript，它们能帮助你避免很多常见的错误。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现双向滑动输入条
这篇文章主要为大家详细介绍了Vue实现双向滑动输入条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
VS-Code中Vue3项目创建vite方式
用户详细说明了使用Node.js和Vite创建Vue3项目的过程,包括安装依赖、项目结构解析（如src/main.ts、App.vue、components、assets等）,以及VSCode插件配置建议,强调核心插件安装和依赖管理的重要性
2025-08-08
vue3.0关闭eslint校验的3种方法详解
这篇文章主要给大家介绍了关于vue3.0关闭eslint校验的3种方法,在实际开发过程中,eslint的作用不可估量,文中将关闭的方法介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue如何利用axios调用后台api接口
这篇文章主要介绍了vue如何利用axios调用后台api接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue实现两个列表之间的数据联动的代码示例
在Vue.js应用开发中,列表数据的联动是一个常见的需求,这种联动可以用于多种场景,例如过滤筛选、关联选择等,本文将详细介绍如何在Vue项目中实现两个列表之间的数据联动,并通过多个具体的代码示例来帮助读者理解其实现过程,需要的朋友可以参考下
2024-10-10
vue3 获取元素高度不准的问题
这篇文章主要介绍了vue3 获取元素高度不准的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue分析同步和异步有什么区别
这篇文章主要介绍了Vue分析同步和异步有什么区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-05-05
基于Vue实现图书管理功能
这篇文章主要为大家详细介绍了基于Vue实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue实现购物车加减
这篇文章主要为大家详细介绍了vue实现购物车加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
在Vue中如何使用Cookie操作实例
这篇文章主要介绍了在Vue中如何使用Cookie操作实例的相关资料,需要的朋友可以参考下
2017-07-07