Frontend Academy · 课时

组件属性与事件派发

使用 defineProps 向下传递数据，使用 defineEmits 向上派发事件，并通过类型和 required 约束验证属性。

第 4 / 4 课12 个步骤

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

Vue 3 中的 Props

Props 用于将数据从父组件传递给子组件。在 <script setup> 中，请使用 defineProps() 声明它们。Props 在子组件中是只读的——请不要直接修改它们。

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

使用 withDefaults 设置 Prop 默认值

将 defineProps() 包装在 withDefaults() 中，以提供默认值。

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

在模板中传递 Props

将静态值作为普通属性传递。使用 v-bind（:）传递动态值。布尔属性只需存在即可传递，无需设置值。

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits——子组件与父组件通信

子组件通过触发事件向上层传递信息。使用 defineEmits() 声明组件可以触发的事件，然后调用它返回的 emit 函数。

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

在父组件中监听 Emits

在模板中使用 @eventName，监听子组件触发的自定义事件。

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

自定义组件中的 v-model

自定义组件上的 v-model 是 :modelValue + @update:modelValue 的简写。组件必须接收该 prop，并触发更新事件。

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

多个 v-model 绑定

Vue 3 支持在一个组件上使用多个带命名修饰符的 v-model。

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Prop 验证

在 Options API 或运行时 props 声明中，添加类型、必填和验证器约束。基于 TypeScript 的 defineProps() 会在编译时提供这些检查。

Prop 与 Data——单向数据流

Vue 强制采用单向数据流：props 从父组件流向子组件，事件从子组件流向父组件。如果子组件需要修改数据，应触发事件，由父组件处理更新。

使用插槽代替 Props

对于应当是 HTML 或组件的内容（而不只是数据），请使用插槽。父组件将内容放在组件标签内部，子组件通过 <slot /> 渲染这些内容。

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

快速检查

Vue 子组件如何向父组件传递事件？

在交互式课程中回答

回顾：Props 与 Emits

使用 defineProps 声明带类型的 props。使用 withDefaults 设置默认值。Props 在子组件中是只读的。使用 defineEmits 声明并为触发的事件设置类型。在父组件中使用 @eventName 进行监听。v-model = :modelValue + @update:modelValue。单向数据流：props 向下传递，事件向上传递。使用插槽传递内容或模板片段。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「组件属性与事件派发」课时是免费的吗？

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

「组件属性与事件派发」这节课中我会学到什么？

使用 defineProps 向下传递数据，使用 defineEmits 向上派发事件，并通过类型和 required 约束验证属性。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「组件属性与事件派发」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy