Vue 3 父子组件通信案例详解：Props 与 Emits 实战
前言
在 Vue 3 开发中，组件通信是最基础也是最重要的技能之一。本文将用实际案例演示 Vue 3 中最常用的两种父子通信方式：Props（父传子）和 Emits（子传父），帮助大家快速掌握 Composition API 下的组件通信技巧。
一、Props 父传子实战
场景描述
我们有一个父组件 ParentComp 需要向子组件 ChildComp 传递用户信息和主题颜色。
代码实现
<!-- 父组件 ParentComp.vue -->
<template><div class="parent"><ChildComp :user="userData" :theme="themeColor"@theme-change="handleThemeChange"/></div>
</template><script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'const userData = ref({name: '张三',age: 25,avatar: 'https://example.com/avatar.jpg'
})const themeColor = ref('blue')function handleThemeChange(newColor) {themeColor.value = newColor
}
</script>
<!-- 子组件 ChildComp.vue -->
<template><div :class="`user-card ${theme}`"><img :src="user.avatar" alt="头像"><h3>{{ user.name }}</h3><p>年龄: {{ user.age }}</p><button @click="changeTheme">切换主题</button></div>
</template><script setup>
// 定义 props 接收父组件数据
const props = defineProps({user: {type: Object,required: true},theme: {type: String,default: 'light' // 默认值}
})// 定义 emits
const emit = defineEmits(['theme-change'])function changeTheme() {const newTheme = props.theme === 'blue' ? 'green' : 'blue'emit('theme-change', newTheme) // 触发事件
}
</script><style scoped>
.user-card.blue {border: 2px solid blue;
}
.user-card.green {border: 2px solid green;
}
</style>
关键点解析
-
defineProps：子组件通过此方法声明接收的 props
- 可以指定类型、必填性和默认值
- 支持复杂对象类型校验
-
props 使用：通过
props.xxx访问父组件传递的值- 模板中可直接使用
- script 中需要通过 props 对象访问
二、Emits 子传父实战
场景描述
子组件需要通知父组件用户点击了"喜欢"按钮，并传递商品ID和喜欢状态。
代码实现
<!-- 父组件 ParentComp.vue -->
<template><div><ProductItem v-for="product in products" :key="product.id":product="product"@like="handleLike"/></div>
</template><script setup>
import { ref } from 'vue'
import ProductItem from './ProductItem.vue'const products = ref([{ id: 1, name: 'Vue 3教程', price: 99 },{ id: 2, name: 'TypeScript手册', price: 88 }
])function handleLike({ id, isLiked }) {const product = products.value.find(p => p.id === id)console.log(`${product.name} ${isLiked ? '已点赞' : '取消点赞'}`)
}
</script>
<!-- 子组件 ProductItem.vue -->
<template><div class="product"><h4>{{ product.name }}</h4><p>价格: {{ product.price }}元</p><button @click="toggleLike">{{ isLiked ? '取消喜欢' : '喜欢' }}</button></div>
</template><script setup>
import { ref } from 'vue'const props = defineProps({product: Object
})// 定义 emits 并添加验证
const emit = defineEmits({like: ({ id, isLiked }) => {if(id && typeof isLiked === 'boolean') {return true}console.warn('无效的 like 事件参数')return false}
})const isLiked = ref(false)function toggleLike() {isLiked.value = !isLiked.valueemit('like', {id: props.product.id,isLiked: isLiked.value})
}
</script>
关键点解析
-
defineEmits：子组件通过此方法声明要触发的事件
- 可以添加事件参数验证
- 支持 TypeScript 类型定义
-
emit 触发：通过
emit('事件名', 参数)通知父组件- 可以传递任意类型参数
- 推荐使用对象形式传递多个参数
三、常见问题解答
Q1: 为什么我的 props 修改无效？
A: Vue 遵循单向数据流原则，子组件不能直接修改 props。如果需要"修改"，应该通过 emit 事件让父组件修改。
Q2: defineProps 和 defineEmits 需要导入吗？
A: 不需要！它们是 <script setup> 中的编译器宏，会自动编译为正确的选项。
Q3: 如何在 TypeScript 中定义 props 类型？
interface User {name: stringage: number
}const props = defineProps<{user: Usertheme?: string // 可选属性
}>()
四、最佳实践建议
-
命名规范：
- props 使用 camelCase 定义，模板中使用 kebab-case
- 自定义事件名使用 kebab-case
-
复杂数据：
- 对象类型的 props 建议使用接口定义
- 考虑使用 toRefs 解构 props 保持响应性
-
性能优化：
- 避免在 props 中传递大型对象
- 不变的 props 可以使用 v-once
结语
通过本文的两个实战案例，相信你已经掌握了 Vue 3 中最核心的父子组件通信方式。记住：
- 父传子用
defineProps - 子传父用
defineEmits
在实际开发中，合理运用这些通信方式可以让你的组件更加清晰可维护。如果有任何问题，欢迎在评论区留言讨论！