南宁公司网站建设方案sem分析是什么

前言

在 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>

关键点解析

1. defineProps：子组件通过此方法声明接收的 props

   • 可以指定类型、必填性和默认值
   • 支持复杂对象类型校验

2. 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>

关键点解析

1. defineEmits：子组件通过此方法声明要触发的事件

   • 可以添加事件参数验证
   • 支持 TypeScript 类型定义

2. 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  // 可选属性
}>()

---

四、最佳实践建议

1. 命名规范：

   • props 使用 camelCase 定义，模板中使用 kebab-case
   • 自定义事件名使用 kebab-case

2. 复杂数据：

   • 对象类型的 props 建议使用接口定义
   • 考虑使用 toRefs 解构 props 保持响应性

3. 性能优化：

   • 避免在 props 中传递大型对象
   • 不变的 props 可以使用 v-once

---

结语

通过本文的两个实战案例，相信你已经掌握了 Vue 3 中最核心的父子组件通信方式。记住：

• 父传子用 defineProps
• 子传父用 defineEmits

在实际开发中，合理运用这些通信方式可以让你的组件更加清晰可维护。如果有任何问题，欢迎在评论区留言讨论！