Vue Academy · 课时

defineProps 与 defineEmits

使用 defineProps () 和 defineEmits () 定义类型化属性，以及使用 withDefaults() 设置默认值。

defineProps 与 defineEmits 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

组件之间的通信

组件通过 props 接收数据，并通过事件向上层发送消息。在 <script setup> 中，您可以使用 defineProps 和 defineEmits 宏来声明它们。

以运行时方式使用 defineProps

您可以像使用选项式 API 一样，通过运行时对象声明 props。这种写法同时适用于 JS 和 TS。

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

使用 TypeScript 泛型定义 defineProps

在 TypeScript 中，通过泛型传入类型，可以更简洁地定义经过类型检查的 props。编译器会将该类型转换为运行时声明。

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

使用 ? 定义可选 props

在类型中的属性后添加问号，即可将其设为可选。父组件不传递可选 props 时，它们可能是 undefined。

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

使用 withDefaults 设置默认值

基于类型的写法没有设置默认值的位置，因此 Vue 提供了 withDefaults。请将 defineProps 包裹起来，并传入一个默认值对象。

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

在模板中使用 Props

Props 具有响应性。您可以在模板中直接引用它们，也可以在脚本中通过 props.x 引用。

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Props 是只读的

切勿在子组件内部修改 prop。Props 只能单向流动：从父组件流向子组件。如果您需要一个本地可编辑的副本，请使用 computed 或本地 ref 派生它。

使用 defineEmits 声明事件

defineEmits 用于声明组件可以触发的事件。运行时写法接收一个事件名称数组。

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

使用 TypeScript 定义类型化事件

基于类型的写法允许您指定事件名称及其载荷类型。这样可以捕获诸如触发错误参数类型之类的错误。

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

触发带载荷的事件

使用事件名称和任意数据调用 emit。父组件通过 @submit 监听，并接收该载荷。

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

整合使用

子组件接收一个 title prop，并触发一个 submit 事件。父组件会同时响应这两者，形成清晰、类型安全的单向数据流和显式事件通信。

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

快速检查

请检查您对 props 和事件触发的掌握程度。

回顾

您已经学习了 <script setup> 中组件的输入与输出：

defineProps 声明输入（运行时对象或 TS 泛型）。
使用 ? 定义可选 props，使用 withDefaults 设置默认值。
Props 是只读的，并且只能单向流动。
defineEmits 声明事件，并可为事件名称和载荷添加类型。

常见问题解答

「defineProps 与 defineEmits」课时是免费的吗？

是的 — 「defineProps 与 defineEmits」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「defineProps 与 defineEmits」这节课中我会学到什么？

使用 defineProps () 和 defineEmits () 定义类型化属性，以及使用 withDefaults() 设置默认值。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「defineProps 与 defineEmits」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy