Props 与自定义事件
使用 props 向下传递数据，并向父组件触发事件
Props 与自定义事件 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
父子组件通信
组件通过两个方向进行通信：
- Props 将数据从父组件向下传递给子组件
- 事件 将消息从子组件向上传递给父组件
这种单向数据流让 app 的行为更可预测。
声明 Props
子组件声明它接受的 props。在脚本设置中，请使用 defineProps。
<script setup>
const props = defineProps(['title', 'count'])
</script>
<template>
<h2>{{ title }}</h2>
<p>{{ count }}</p>
</template>带类型的 Props
将 props 声明为对象，以指定用于验证的类型。
<script setup>
defineProps({
title: String,
count: Number,
isActive: Boolean
})
</script>带默认值和必填项的 Props
您可以将 props 标记为必填，并为其提供默认值。
<script setup>
defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>从父组件传递 Props
父组件将数据作为属性传递。请使用 : 绑定动态值。
<template>
<ProductCard
title="Coffee Mug"
:count="stock"
:is-active="available"
/>
</template>
<!-- static string vs bound expression -->Prop 命名约定
在 JS 中使用 camelCase 声明 props，在模板中使用 短横线命名法传递它们。
- JS prop：isActive
- 模板属性：:is-active
Vue 会自动在两种命名方式之间进行转换。
Props 只读
子组件不得直接修改自己的 props。
- Props 只能单向向下流动
- 修改 props 会破坏可预测性并触发警告
- 要更改共享数据，请触发事件，让父组件进行更新
声明触发的事件
子组件使用 defineEmits 声明它触发的事件。
<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>触发事件
调用 emit 函数向上传递事件，也可以选择传入负载数据。
<script setup>
const emit = defineEmits(['add'])
function handleClick() {
emit("add", { id: 1, name: "Item" })
}
</script>
<template>
<button @click="handleClick">Add</button>
</template>在选项式 API 中触发事件
在选项式 API 中，请改为调用 this.$emit。
export default {
emits: ["save"],
methods: {
onSave() {
this.$emit("save", this.formData)
}
}
}父组件监听事件
父组件使用 @event-name 监听事件并接收负载数据。
<template>
<TodoItem
:task="task"
@delete="removeTask"
@add="onAdd"
/>
</template>
<script setup>
function onAdd(item) {
console.log("Added:", item.name)
}
</script>快速检查
测试您对 props 和事件的理解。
回顾：Props 和事件
您学会了组件通信：
- defineProps 声明带有类型和默认值的 props
- Props 向下传递且为只读
- defineEmits 声明事件
- emit("name", payload) 向上传递事件
- 父组件使用 @event 监听事件
下一节：插槽和作用域插槽。
常见问题解答
「Props 与自定义事件」课时是免费的吗？
是的 — 「Props 与自定义事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「Props 与自定义事件」这节课中我会学到什么？
使用 props 向下传递数据，并向父组件触发事件 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「Props 与自定义事件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。