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，它们能帮助你避免很多常见的错误。

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

您可能感兴趣的文章:

vue2导入使用vue-codemirror组件的教程详解
vue-codemirror是一个基于Vue的代码在线编辑器组件,它封装了CodeMirror编辑器,使得在Vue项目中可以方便地使用CodeMirror,下面我们就来看看vue-codemirror的具体使用吧
2024-02-02
让webpack+vue-cil项目不再自动打开浏览器的方法
今天小编就为大家分享一篇让webpack+vue-cil项目不再自动打开浏览器的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue项目部署上线全过程记录(保姆级教程)
vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目,下面这篇文章主要给大家介绍了关于Vue项目部署上线的相关资料,需要的朋友可以参考下
2023-03-03
iview实现动态表单和自定义验证时间段重叠
这篇文章主要介绍了iview实现动态表单和自定义验证时间段重叠，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
关于Vue 自定义指令实现元素拖动的详细代码
这篇文章主要介绍了Vue 自定义指令实现元素拖动,在使用自定义指令之前，先对自定义指令有一定的了解，主要从自定义指令定义范围，钩子函数方面入手，需要的朋友可以参考下
2022-01-01
vue中循环表格数据出现数据联动现象(示例代码)
在Vue中循环生成表格数据时,可能会遇到数据联动的现象,即修改一个表格中的数据后,其他表格的数据也会跟着变化,这种现象通常是因为所有表格的数据引用了同一个对象或数组导致的,本文介绍vue中循环表格数据出现数据联动现象,感兴趣的朋友一起看看吧
2024-11-11
Vue大屏数据展示示例
公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，本文主要介绍了Vue大屏数据展示示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vue.js项目在IE11白屏报错的解决方法
本文主要介绍了Vue.js项目在IE11白屏报错的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
vue实现显示消息提示框功能
这篇文章主要介绍了vue实现显示消息提示框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Vue表单控件数据绑定方法详解
本文将详细介绍Vue表单控件数据绑定方法,需要的朋友可以参考下
2020-02-02