快捷導(dǎo)航

Vue3的definePros和defineEmits使用及說(shuō)明

更新時(shí)間：2025年10月11日 09:52:55 作者：whale fall

Vue3中的defineProps和defineEmits是組合式API的一部分,用于定義組件的props和事件,defineProps簡(jiǎn)化了props的定義和類(lèi)型安全,而defineEmits則用于聲明和觸發(fā)組件的自定義事件,確保事件名稱(chēng)的類(lèi)型安全

1.defineProps

defineProps 用來(lái)定義組件的 props，即組件從父組件接收的屬性。它使得在 <script setup> 中使用 props 變得更加簡(jiǎn)單和類(lèi)型安全。

基本用法

<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 接收一個(gè)對(duì)象，可以為每個(gè) prop 提供類(lèi)型、默認(rèn)值、是否必填等信息。
在 <template> 中直接訪問(wèn) props，無(wú)需手動(dòng)定義 props。

類(lèi)型推導(dǎo)

如果使用 TypeScript，可以通過(guò)類(lèi)型推導(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ā)出的事件，并確保事件名稱(chēng)的類(lèi)型安全。

基本用法

<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 接受一個(gè)對(duì)象或類(lèi)型，它定義了所有可能觸發(fā)的事件及其參數(shù)類(lèi)型。
emit 是一個(gè)函數(shù)，用于觸發(fā)自定義事件，在 Vue 3 中無(wú)需手動(dòng)綁定 $emit。

多事件支持

你也可以定義多個(gè)事件：

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

3.組合使用

你可以在一個(gè)組件中同時(shí)使用 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>