Vue3的definePros和defineEmits使用及說明
更新時間：2025年10月11日 09:52:55 作者：whale fall
Vue3中的defineProps和defineEmits是組合式API的一部分,用于定義組件的props和事件,defineProps簡化了props的定義和類型安全,而defineEmits則用于聲明和觸發(fā)組件的自定義事件,確保事件名稱的類型安全
在 Vue 3 中，defineProps 和 defineEmits 是組合式 API 中用于定義組件的 props 和 事件 的方法，提供了一種更簡潔和明確的方式來管理組件的輸入和輸出。
它們屬于 Composition API 的一部分，在 Vue 2 中通常使用 props 和 $emit 來實現(xiàn)。
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 提供類型、默認(rèn)值、是否必填等信息。- 在
<template>中直接訪問props，無需手動定義props。
類型推導(dǎo)
如果使用 TypeScript，可以通過類型推導(dǎo)讓 props 更加明確和安全：
<script setup lang="ts">
import { defineProps } from 'vue';
interface Props {
msg: string;
count: number;
}
const props = defineProps<Props>();
</script>
2.defineEmits
defineEmits 用于定義組件觸發(fā)的 自定義事件。它讓你在 <script setup> 中聲明組件發(fā)出的事件，并確保事件名稱的類型安全。
基本用法
<script setup>
import { defineEmits } from 'vue';
// 定義事件
const emit = defineEmits<{
(event: 'update', newValue: string): void;
}>();
// 觸發(fā)事件
const changeValue = () => {
emit('update', 'new value');
};
</script>
<template>
<button @click="changeValue">Change Value</button>
</template>
解釋
defineEmits接受一個對象或類型，它定義了所有可能觸發(fā)的事件及其參數(shù)類型。emit是一個函數(shù)，用于觸發(fā)自定義事件，在 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;
}>();
// 觸發(fā)事件
const updateTitle = () => {
emit('updateTitle', 'New Title');
};
</script>
<template>
<h1>{{ props.title }}</h1>
<button @click="updateTitle">Update Title</button>
</template>
總結(jié)
defineProps：用于定義組件的輸入（即 props），提供了類型推導(dǎo)和默認(rèn)值的支持。defineEmits：用于定義組件的輸出（即觸發(fā)的事件），提供了事件類型安全。
這兩個方法大大簡化了組件的編寫，使得代碼更加簡潔、可維護(hù)，并且提供了更強(qiáng)的類型安全。如果你用 TypeScript，它們能幫助你避免很多常見的錯誤。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)雙向滑動輸入條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
VS-Code中Vue3項目創(chuàng)建vite方式
用戶詳細(xì)說明了使用Node.js和Vite創(chuàng)建Vue3項目的過程,包括安裝依賴、項目結(jié)構(gòu)解析（如src/main.ts、App.vue、components、assets等）,以及VSCode插件配置建議,強(qiáng)調(diào)核心插件安裝和依賴管理的重要性2025-08-08
這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗的3種方法,在實際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue如何利用axios調(diào)用后臺api接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue實現(xiàn)兩個列表之間的數(shù)據(jù)聯(lián)動的代碼示例
在Vue.js應(yīng)用開發(fā)中,列表數(shù)據(jù)的聯(lián)動是一個常見的需求,這種聯(lián)動可以用于多種場景,例如過濾篩選、關(guān)聯(lián)選擇等,本文將詳細(xì)介紹如何在Vue項目中實現(xiàn)兩個列表之間的數(shù)據(jù)聯(lián)動,并通過多個具體的代碼示例來幫助讀者理解其實現(xiàn)過程,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue3 獲取元素高度不準(zhǔn)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue分析同步和異步有什么區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了基于Vue實現(xiàn)圖書管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車加減，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了在Vue中如何使用Cookie操作實例的相關(guān)資料,需要的朋友可以參考下2017-07-07